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一 一 一 学 就 会 魔法 书 (第 2 版 ) 序 


首先 感谢 您 对 “一 学 就 会 魔法 书 ”的 支持 与 厚爱 ! 

“一 学 就 会 魔法 书 ” (第 1 版 ) 自 2005 年 出 版 以 来 ， 曾 在 全 国 各 大 书店 畅销 一 时 ， 先 
后 有 近 百 万 读者 通过 这 套 书 学 习 了 电脑 相关 技能 , 被 全 国 各 地 400 多 家 电脑 培训 机 构 、 机 关 、 
社区 、 企业 、 学 校 选 作 培 训 教 材 , 截至 目前 , 这 套 书 累计 销售 近 100 万 册 , 其 中 5 种 荣获 2006 
年 度 “ 全 国 优秀 畅销 书 ” 奖 。 

许多 热心 读者 反映 ， 通 过 “一 学 就 会 魔法 书 ” 学 会 了 电脑 操作 ， 为 自己 的 工作 与 生活 
带 来 了 乐趣 。 有 的 读者 希望 增加 一 些 新 的 品种 ， 有 的 读者 反映 一 些 知识 落后 了 ， 和 希望 能 出 
新 的 版 本 。 为 了 满足 广大 读者 的 需求 ， 我 们 对 “一 学 就 会 魔法 书 ”进行 了 大 幅度 更 新 ， 包 
括 内 容 、 版 式 、 封 面 和 光盘 运行 环境 的 更 新 与 优化 ， 同 时 还 增加 了 很 多 新 的 、 流行 的 品种 ， 
使 内 容 更 加 贴近 读者 ， 与 时 俱 进 。 

“一 学 就 会 魔法 书 ” (第 2 版 ) 继承 了 第 1 版 的 优点 : “轻松 活 小 ”“ 起 点 低 ， 入 门 
快 ” 和 “情景 式 学 习 ” 等 ， 力 求 让 读者 把 一 个 个 电脑 技能 当 作 “魔法 ”来 学 习 ， 在 惊叹 电 
脑 神奇 的 同时 ， 轻 松 掌握 操作 电脑 的 技能 。 


一 、 从 书 内 容 特点 


本 从 书 内 容 有 以 下 特点 : 

(一 ) 情景 式 教学 ， 让 电脑 学 习 轻 松 愉快 

本 从 书 为 读者 设置 了 一 个 轻松 、 活 泌 的 学 习 情 境 ， 书 中 以 一 个 活泼 可 爱 的 “小 魔女 ” 
的 学 习 历程 为 线索 ， 循 着 她 学 习 的 脚步 ， 读 者 可 以 掌握 一 项 项 技能 ， 解 决 一 个 个 问题 ， 同 
时 还 有 一 个 “魔法 师 ” 循 循 善 诱 ， 深 入 浅 出 地 讲解 各 个 知识 点 ， 并 不 时 提出 学 习 建议 。 情 
景 式 学 习 ， 寅 教 于 乐 ， 让 学 习 轻 松 、 愉 快 、 充 满 情趣 。 

(二 ) 动态 教学 ， 操 作 流程 一 目 了 然 

为 了 让 读者 更 为 直观 地 看 到 操作 的 动态 过 程 ， 本 丛书 在 讲解 时 尽量 采用 图 示 方式 ， 并 
用 醒目 的 序号 标示 操作 顺序 ， 且 在 关键 处 用 简单 的 文字 描述 ， 在 有 联系 的 图 与 图 之 问 用 箭 
头 连接 起 来 ， 将 电脑 上 的 操作 过 程 动态 地 体现 在 纸 上 ， 让 读者 在 看 书 的 同时 感觉 就 像 在 电 
脑 上 操作 一 样 直观 。 

(三 ) 解疑 释 惑 让 学 习 畅 通 无 阻 ， 动 手 练习 让 学 习 由 被 动 变 主 动 

“魔力 测试 ”让 您 可 以 随时 动手 , “常见 问题 解答 ” 帮 您 清除 学 习 路 上 的 “拦路 虎 ”， 
“过 关 练 习 ” 让 您 能 强化 操作 技能 ， 这 些 都 是 为 了 让 读者 主动 学 习 而 精心 设计 的 。 

本 丛书 中 穿插 的 “小 魔女 ”的 各 种 疑问 就 是 读者 常见 的 问题 ， 而 “魔法 师 ”的 回答 
让 读者 齿 然 开朗 。 这 种 一 问 一 答 的 互动 模式 让 学 习 畅 通 无 阻 。 
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二 、 光 盘 内 容 及 其 特点 


本 丛书 的 光盘 是 一 套 专业 级 交互 式 多 媒体 光盘 ， 采 用 全 程 语音 讲解 、 情 景 式 教 学 、 详 
细 的 图 文 对 照 方式 ， 通 过 全 方位 的 结合 引导 读者 由 浅 至 深 ， 一 步 一 步 地 完成 各 个 知识 点 的 
学 习 。 

(一 ) 多 媒体 教学 演示 ， 如 同 老师 在 身边 手把手 教 您 

多 媒体 演示 中 ， 通 过 3 个 虚拟 人 物 再 现 了 一 个 学 习 过 程 : 一 个 活泼 可 爱 的 “小 魔女 ” 提 
出 各 式 各 样 的 问题 ， 引 出 了 各 个 知识 点 的 学 习 任务 ， 安 排 了 一 个 知识 渊博 的 “魔法 师 ” 耐 心 、 
详细 地 解答 问题 ; 另外 还 安排 了 一 个 调皮 的 “小 精灵 ”， 总 是 在 不 经 意 间 让 您 了 解 一 些 学 习 的 
窍门 。 

(二 ) 多 媒体 教学 练习 ， 边 看 边 练 是 最 快 的 学 习 方 式 

通过 “新 手 练习 ”按钮 ， 用 户 可 以 边 学 边 练 ， 通 过 “交互 ”按钮 ， 用 户 可 以 进行 模 
拟 操作 ， 巩 固 学 到 的 知识 。 

(三 ) 素材 、 源 文件 等 学 习 辅 助 资料 一 应 俱全 

模仿 是 最 快 的 学 习 方式 ， 为 了 便于 读者 直接 模仿 书 中 内 容 进行 操作 ， 本 书 光盘 提供 所 
有 实例 的 素材 和 源 文件 ， 读 者 可 直接 调用 ， 非 常 方 便 。 

(四 ) 赠品 : 提供 多 款 安装 软件 〈 试 用 版 ) ， 不 用 额外 去 获取 

为 了 方便 读者 ， 本 光盘 提供 了 “Office 2007” 简 体 中 文 测试 版 软件 、“ 卡 巴 斯 基 ” 杀 
毒 软件 (免费 使 用 1 个 月 )、 微 点 主动 防御 软件 一 一 电脑 病毒 免疫 专家 (免费 使 用 3 个 月 )， 
还 附带 了 多 种 工具 软件 ， 如 屏幕 录制 软件 等 。 

(五 ) 赠品 : 额外 提供 更 加 深入 的 多 媒体 演示 和 相关 素材 

为 了 便于 读者 深入 学 习 ， 本 光盘 在 “软件 与 赠品 ”目录 下 额外 提供 了 更 加 深入 的 多 媒 
体 教学 演示 和 相关 素材 ， 读 者 可 根据 该 内 容 自 行 学 习 。 
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一 学 丽 会 属 活 


了 中 


Dreamweaver CS3+Flash CS3 +Photoshop CS3+PHP+MySQL 是 目前 网 站 设计 制作 的 强 
大 组 合 。 其 中 ，Dreamweaver CS3 用 于 完成 前 台 页 面 的 制作 ，Photoshop CS3 用 于 制作 网 页 
所 需 的 图 像 ，Flash CS3 用 于 制作 网 页 中 的 动画 ， 而 PHP 则 作为 后 台 的 程序 设计 语言 ， 
MySQL 则 用 于 创建 数据 库 。 通 过 这 几 种 软件 的 综合 应 用 ， 相 信 读 者 能 在 最 短 的 时 间 内 学 
会 并 掌握 制作 出 漂亮 、 功 能 强大 的 网 站 的 技能 。 

双 本 书 内 容 

网 站 应 用 领域 极为 广泛 ， 为 了 使 读者 掌握 到 最 实用 的 网 站 主流 技术 ， 我 们 根据 主流 网 
站 的 特点 以 及 初学 者 的 实际 情况 ， 精 心安 排 了 各 章节 。 在 讲解 过 程 中 力求 做 到 浅显 易 懂 、 
由 浅 入 深 。 其 中 还 穿插 了 大 量 实 例 ， 便 于 读者 将 理论 与 实践 相 结合 ， 提 高 学 习 效 率 。 本 书 
共 14 章 ， 分 为 以 下 4 个 部 分 。 
目 的 
第 1 部 分 (第 1 章 ) 大 致 了 解 网 站 的 内 容 和 结构 


搭建 建站 的 平台 ， 布 局 、 对 象 的 插入 及 | 掌握 网 站 的 基本 操作 , 学 会 布局 、 
ss 插入 网 页 的 基本 对 象 
交互 网 页 的 相关 知识 和 使 用 函数 、 表 单 
第 3 部 分 (第 10~13 章 ) 制作 出 交互 网 页 熟练 掌握 交互 网 页 的 制作 
综合 运用 前 面 所 学 知识 制作 出 一 
第 4 部 分 (第 14 章 ) 综合 应 用 实例 个 完整 的 网 站 


坟 本 书 适合 的 读者 对 象 

本 书 适合 以 下 读者 : 

(1) 对 网 站 制作 感 兴趣 的 朋友 。 

(2) 网 站 制作 初学 者 。 

(3) 想 制作 个 人 网 站 、 企 业 网 站 的 朋友 。 
(4) 在 校 学 生 。 


叉 如 何 阅读 本 书 

本 书 每 章 均 按 照 “ 本 章 要 点 + 内 容 导读 + 本 章 内 容 + 常见 问题 解答 + 过 关 练 习 ” 的 结构 进 
行 讲述 。 

人 党” 本章 要 点 : 以 简练 的 语言 列 出 本 章 要 点 ,使 读者 对 本 章 将 要 讲解 的 内 容 一 目 了 然 。 

党 ”内容 导读 : 通过 “小 魔女 ”和 “魔法 师 ”的 对 话 引出 本 章 内 容 ， 活 泼 生动 的 语言 
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Dp 


读 来 兴趣 查 然 ， 同 时 可 以 了 解 学 习 本 章 的 原因 和 重要 性 。 
人 ”本 章 内 容 ， 将 实例 贯穿 于 知识 点 中 讲解 ， 将 知识 点 和 实例 融 为 一 体 ， 以 图 示 方式 
进行 讲解 ， 并 通过 典型 实例 强化 巩固 知识 点 。 
党 常见 问题 解答 : 由 “小 魔女 " 提出 在 学 习 和 应 用 本 章 相关 知识 时 过 到 的 疑难 问题 ， 
“魔法 师 ” 作 答 ， 达 到 帮助 读者 解 总 、 扩 展 知识 面 的 目的 。 
心 ” 过 关 练 习 ; 列举 一 些 上 机 操作 题 ， 以 提高 读者 的 实际 动手 能 力 。 
另外 ， 了 解 以 下 几 点 更 有 利于 学 习 本 书 。 
(1) 本 书 设计 了 调皮 好 学 的 “小 魔女 ”和 知识 渊博 的 “魔法 师 ” 两 个 人 物 ， 分 别 失 
演 学 生 和 老师 的 角色 ， 本 书 内 容 就 由 他 们 贯穿 始终 。 读 者 可 以 结合 多 媒体 教学 光盘 ， 随 
着 “小 魔女 ”的 学 习 步伐 ， 听 听 “ 魔 法 师 ” 的 讲解 ， 通 过 互动 式 学 习 掌握 制作 网 站 的 基本 
操作 。 
(2) 本 书 在 讲解 知识 点 时 尽量 采用 图 示 方式 ， 用 园 . 回 、 图 表示 操作 顺序 ， 并 在 关键 
步骤 用 简单 的 文字 描述 , 有 联系 的 图 与 图 之 间 用 箭头 连接 起 来 ,体现 操作 的 动态 变化 过 程 ， 
读者 只 要 结合 文字 讲解 就 可 以 很 容易 地 学 会 相应 操作 。 
(3) 本 书 将 丰富 生动 的 实例 贯穿 于 知识 点 中 ， 学 完 一 个 实例 就 学 会 了 一 种 技能 ， 能 
解决 一 个 实际 问题 ， 读 者 在 学 习 时 可 以 有 意识 地 用 它 来 完成 某 个 任务 ， 帮 助理 解 知识 点 。 
(4) 本 书 中 穿插 了 “小 魔女 ”和 “魔法 师 ” 的 提示 语言 以 及 魔法 档案 和 魔力 测试 两 
个 小 栏目 。 看 到 “小 魔女 ”、“ 魔 法 师 ”卡通 和 “魔法 档案 ”可 要 提高 警惕 哟 ， 它 们 都 是 
需要 重点 注意 的 地 方 。“ 魔 力 测试 ”实际 就 是 强化 知识 点 的 小 练习 ， 只 要 即时 练习 ， 趁 热 
打铁 ， 就 能 记忆 深刻 。 
(5) 过 关 练 习 是 巩固 所 学 知识 点 和 提高 动手 能 力 的 关键 ， 必 须 综合 运用 前 面 所 学 的 
知识 点 才 可 能 做 出 来 。 建 议 读者 一 定 要 正确 做 完 所 有 题目 后 再 进入 下 一 章 的 学 习 。 
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http://www.jzbooks.com。 
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网 站 快速 扫盲 


小 魔女 : 


魔法 师 : 


小 魔女 : 


魔法 师 : 


小 魔女 : 
魔法 师 : 
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魔法 师 ， 我 在 网 络 上 看 到 有 许 
多 精美 的 网 站 ， 好 想 自己 也 制 
作 一 个 网 站 哦 ， 可 从 何 入 
Se 

想 不 想 拜 我 为 师 啊 ? 学 会 制作 
网 站 后 你 就 可 以 畅游 网 络 ， 尽 
享 无 穷 的 乐趣 了 1 

好 啊 ， 不 过 听 他 们 说 制作 网 站 
很 难 ， 我 帕 学 不 会 。 

小 魔女 ， 你 太 小 瞧 自 己 了 吧 ? 
只 要 努力 ， 怎么 会 有 学 不 会 的 
知识 呢 ? 

好 ， 那 现在 开始 教 我 吧 ! 

别 着 急 ， 我 们 先 来 认识 一 下 什 
么 是 网 站 ,什么 是 网 页 。 
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1.1 认识 网 页 


想 制作 漂亮 的 网 页 吗 ? 先 别 着 急 ， 在 制作 网 页 之 前 ， 必 须 先 了 解 一 下 什么 是 网 页 ， 以 
及 网 页 的 类 型 。 


1.1.1 什么 是 网 页 


我 们 上 网 的 时 候 , 在 浏览 器 中 看 到 的 页 面 就 是 网 页 。 网 页 通常 是 由 文本 、 图 像 、 动 画 、 
超 链接 等 元 素 组 成 的 ， 如 图 1-1 所 示 为 淘宝 网 的 一 个 页 面 。 
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图 1-1 网 页 


1.1.2 ”网 页 有 哪些 类 型 


网 页 按照 其 表现 形式 可 分 为 动态 网 页 和 静态 网 页 。 动 态 网 页 和 静态 网 页 并 不 是 通过 网 
页 中 是 否 插入 了 动态 元 素来 区 分 的 ， 而 是 针对 客户 端 与 服务 器 端 是 否 发 生 交互 行为 而 言 ， 
其 中 发 生 交互 行为 的 网 页 叫做 动态 网 页 (俗称 交互 网 页 ) ， 不 发 生 交互 行为 的 网 页 叫做 静 
态 网 页 。 动 态 网 页 与 静态 网 页 的 特点 分 别 介 绍 如 下 。 
党 ”动态 网 页 : 使 用 ASP、PHP、CGI 等 程序 生成 的 网 页 ， 可 以 与 浏览 者 进行 交互 ， 
如 可 以 收集 浏览 者 填写 的 表单 信息 ， 也 称 为 交互 式 网 页 。 
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学 ”静态 网 页 : 使 用 HTML 语言 编写 的 网 页 ， 其 制作 方法 简单 易学 ， 但 缺乏 灵活 性 。 
1.2 认识 网 站 


网 站 其 实 就 是 由 多 个 网 页 组 成 的 一 个 集合 ， 它 们 相互 之 间 存 在 着 间接 或 直接 的 联系 ， 
网 页 之 间 的 跳 转 则 通过 超 链 接 来 实现 。 


1.2.1 网 站 的 种 类 


网 站 根据 内 容 划 分 ， 可 以 分 为 专业 网 站 、 门 户 网 站 、 职 能 网 站 和 个 人 网 站 4 种 。4 种 
网 站 的 特点 分 别 介绍 如 下 。 
党 ”专业 网 站 : 专业 网 站 具有 较 强 的 专业 性 ， 主 要 针对 需要 查询 某 些 专业 领域 信息 的 
浏览 者 。 如 图 1-2 所 示 的 PHOTAL 网 站 就 是 一 个 专门 针对 多 媒体 设计 领域 的 专业 
网 站 。 
党 “门户 网 站 : 门户 网 站 涉及 的 领域 非常 广泛 ， 是 一 种 综合 性 网 站 ， 如 搜狐 、 网 易 和 
新 浪 等 。 如 图 1-3 所 示 为 “新 浪 ” 网 站 。 
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图 1-2 专业 网 站 图 1-3 门户 网 站 

学” 职能 网 站 : 职能 网 站 的 作用 是 为 了 完成 某 项 职能 ， 如 为 客户 提供 售后 服务 以 及 政 
府 机 构 的 服务 性 网 站 等 。 如 图 1-4 所 示 的 “前 程 无 忧 ”网 站 就 是 一 个 职能 网 站 ， 
在 该 网 站 中 用 户 可 以 方便 、 快 捷 地 招聘 人 才 或 者 寻找 工作 等 。 

党 个 人 网 站 : 个 人 网 站 是 以 个 人 名 义 开 发 创建 的 具有 较 强 个 性 化 色彩 的 网 站 。 如 
图 1-5 所 示 的 “刘翔 个 人 网 站 ”就 是 一 个 个 人 网 站 。 
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1.2.2 


1-4 职能 网 站 1-5 个 人 网 站 
网 站 中 的 常用 专业 术语 


在 制作 网 站 时 ， 难 免 会 接触 许多 和 网 络 有 关 的 专业 术语 ， 了 解 这 些 专业 术语 的 概念 对 
于 以 后 的 网 页 制作 有 很 大 的 帮助 。 


J 


万 维 网 (World Wide Web) : 万 维 网 简称 WWW 或 3W， 是 目前 Internet ( 因 
特 网 ) 上 最 流行 的 一 种 基于 超 文 本 形式 的 资源 信息 服务 系统 。 利用 万 维 网 可 以 将 全 
世界 的 各 种 信息 链接 在 一 起 ， 用 户 可 通过 网 络 无 偿 地 访问 这 些 资源 并 加 以 利用 。 
浏览 器 : 使 用 浏览 器 访问 网 络 中 的 各 种 资源 就 像 在 互联 网 的 海洋 中 冲浪 一 样 。 目 
前 使 用 最 广泛 的 浏览 器 主要 有 Microsoft Internet Explorer( IE )、 Netscape Navigator 
(NN) 、 腾 讯 TT、Maxthon 等 。 
文件 传输 协议 〈File Transfer Protocol) : 文件 传输 协议 简称 FTP， 它 是 一 种 快 
速 、 高 效 和 可 靠 的 信息 传输 方法 。 通 过 该 协议 可 以 把 文件 从 一 个 地 方 传 到 另外 一 
个 地 方 ， 从 而 真正 地 实现 资源 互 享 。 制 作 完成 后 的 网 页 要 上 传 到 服务 器 ， 就 必须 
使 用 FTP 协议 。 
超 文 本 标记 语言 (Hyper Text Markup Language) : 超 文 本 标记 语言 简称 HTML， 
网 页 就 是 通过 超 文本 标记 语言 创建 的 ,用 HTML 语言 编写 的 网 页 文件 的 扩展 名 一 
般 为 *.htm 或 *.html。 
IP 地 址 : IP 地 址 是 一 组 32 位 的 数字 号 码 ， 用 于 标识 网 络 中 的 每 一 台电 脑 ， 如 
68.211.249.143。 在 浏览 器 中 输入 网 站 所 在 服务 器 的 他 地 址 就 可 以 访问 该 网 站 。 
域名 : 由 于 了 他 地 址 是 一 长 囊 的 数字 号 码 ， 要 记 住 这 些 号 码 非 常 困难 ,为 了 方便 大 
家 理解 、 记 忆 ， 便 有 了 域名 的 概念 。 域 名 是 使 用 英文 字符 或 汉语 拼音 来 和 固定 的 
卫 地 址 相对 应 ， 这 些 英文 字符 和 汉语 拼音 基本 和 网 站 名 称 一 致 ， 因 此 记忆 起 来 十 
分 轻松 。 域 名 的 一 般 书 写 格 式 为 “主机 名 .机 构 名 .类 别名 .地 区 名 ”, 如 www.qq.com 
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就 是 腾讯 网 站 的 域名 。 

% ” 超 链 接 : 超 链接 是 制作 网 页 时 经 常 需 要 用 到 的 功能 , 通过 它 可 以 在 网 站 内 部 页 面 、 
对 象 之 间 建 立 链接 ， 也 可 以 与 其 他 网 站 的 页 面 和 对 象 建立 链接 。 通 过 单 击 网 页 中 
的 超 链接 就 可 以 转 到 相应 的 页 面 上 进行 浏览 。 

% 导航 条 : 导航 条 是 多 个 超 链接 的 集合 ， 能 十 分 有 效 地 实现 超 链接 功能 。 它 就 像 书 
的 目录 ， 包 括 了 整个 网 站 中 主要 页 面 的 关键 词 ， 单 击 导航 条 上 的 超 链接 ， 就 可 以 
跳 转 到 相应 的 页 面 进行 浏览 。 导航 条 一 般 有 横 式 和 坚 式 两 种 , 实现 的 方法 也 很 多 ， 
可 以 是 纯 文本 、 按 钮 或 图 片 ， 也 可 以 用 Flash 动画 或 脚本 语言 来 实现 。 

党 表单: 表单 是 用 于 填写 申请 或 提交 信息 的 交互 页 面 ， 如 电子 邮箱 、 主 页 空间 、QQ 
号 码 等 的 申请 页 面 、 登 录 页 面 。 

党 发布 : 发 布 是 指 将 制作 好 的 网 页 上 传 到 网 上 的 过 程 ， 也 称 上 传 或 上 载 。 虽 然 做 好 

了 网 页 ， 但 如 果 没 有 将 网 站 内 容 放 到 主页 服务 器 上 ， 这 些 资源 只 是 保留 在 自己 的 
本 地 硬盘 里 而 已 ， 别 人 是 无 法 访问 到 这 些 资源 的 。 


1.3 如 何 制 作 网 页 


要 想 制 作出 漂亮 的 网 页 ， 首 先 需要 选用 适当 的 Web 页 面 开发 语言 和 方便 、 易 用 的 开发 
工具 ， 然 后 熟悉 网 站 制作 的 整个 流程 及 其 相关 规划 、 技 巧 ， 只 有 这 样 才能 梦想 成 真 。 


1.3.1 Web 页 面 开发 语言 


网 页 都 是 通过 网 页 标记 来 实现 页 面 显 示 的 , 它们 可 通过 HTML 语言 完成 , 但 如 需 进行 
交互 ， 则 需要 将 交互 语言 插入 HTML 中 。 随 着 网 页 制作 技术 的 不 断 发 展 ， 产 生 了 新 的 标记 
语言 ， 如 XML、XHML， 下 面 详细 讲解 。 


1. HTML 


HTML (Hyper Text Markup Language) 即 超 文本 标记 语言 ， 是 WWW 的 描述 语言 。 设 
计 HTML 语言 的 目的 是 为 了 能 把 存放 在 一 台电 脑 中 的 文本 或 图 形 与 另 一 台电 脑 中 的 文本 
或 图 形 方便 地 联系 在 一 起 ， 形 成 有 机 的 整体 。 人 们 不 用 考虑 具体 信息 是 在 当前 电脑 上 还 是 
在 网 络 中 的 其 他 电脑 上 ， 只 需 使 用 鼠标 在 某 一 文档 中 点 取 一 个 图 标 ，Intemet 就 会 马上 转 到 
与 此 图 标 相关 的 内 容 上 去 ， 而 这 些 信息 可 能 存放 在 网 络 中 的 另 一 台电 脑 中 。 HTML 文本 
是 由 HTML 命令 组 成 的 描述 性 文本 ，HTML 命令 可 以 是 说 明文 字 、 图 形 、 动画 、 声 音 、 表 
格 、 链 接 等 。HTML 的 结构 包括 头 部 (Head) 、 主 体 (Body) 两 大 部 分 ， 其 中 头 部 描述 浏 
览 器 所 需 的 信息 ， 而 主体 则 包含 所 要 说 明 的 具体 内 容 。 


2. XML 


XML 是 Extensible Markup Language 的 缩写 ， 是 一 种 可 扩展 标记 语言 。 该 语言 使 用 一 
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系列 简单 的 标记 描述 数据 ， 而 这 些 标记 可 以 非常 方便 地 建立 。 虽然 XML 和 二 进 制 数据 相 比 要 
占用 更 多 的 空间 ,但 XML 极其 简单 、 易 于 掌握 和 使 用 ， 在 某 种 程度 上 弥补 了 HTML 的 不 足 。 


3. XHTML 


XHTML 是 The Extensible HyperText Markup Language (可 扩展 超 文本 标记 语言 ) 的 缩 
写 。HTML 是 一 种 基本 的 Web 网 页 设计 语言 ， 而 XHTML 是 一 种 基于 XML 的 标记 语言 ， 
看 起 来 与 HTML 有 些 相像 ， 只 有 一 些小 的 区 别 。XHTML 就 是 一 个 扮演 着 类 似 HTML 的 角 
色 的 XML， 所 以 从 本 质 上 来 说 ，XHTML 是 一 种 过 渡 技术 ， 结 合 了 部 分 XML 的 强大 功能 
及 大 多 数 HTML 的 简单 特性 。 

2000 年 底 ， 国 际 W3C 组 织 (World Wide Web Consortium) 公布 发 行 了 XHTML 1.0 
版 本 ， 这 是 一 种 在 HTML 4.0 基础 上 优化 和 改进 的 新 语言 ， 目 的 是 基于 XML 的 应 用 。 
XHTML 是 一 种 增强 了 的 HTML, 其 可 扩展 性 和 灵活 性 可 以 适应 未 来 网 络 应 用 更 多 的 需求 。 
虽然 XML 数据 转换 能 力 强大 ， 完 全 可 以 替代 HTML， 但 面 对 成 千 上 万 已 有 的 基于 HTML 
语言 设计 的 网 站 ,直接 采用 XML 还 为 时 过 早 ， 因 此 在 HTML 4.0 的 基础 上 用 XML 的 规则 
对 其 进行 扩展 ， 便 得 到 了 XHTML。 所 以 ， 建 立 XHTML 的 目的 就 是 实现 HTML 向 XML 
的 过 渡 , 目前 国际 上 在 网 站 设计 中 推崇 的 Web 标准 就 是 基于 XHTML 的 应 用 ( 即 通常 所 说 
的 CSS+TDIV) 。 


1.3.2 ”网 页 制作 常用 工具 


网 页 是 由 多 种 元 素 组 成 的 ， 要 想 制作 出 精致 美观 、 丰 富生 动 的 网 页 不 是 单 靠 一 种 软件 
就 能 实现 的 ， 需 要 结合 多 种 软件 来 处 理 网 页 中 的 元 素 ， 如 图 像 处 理 软件 Photoshop 和 
Fireworks、 动 画 处 理 软件 Flash 和 网 页 布局 软件 Dreamweaver 等 。 


1， 网 页 布局 软件 


常用 的 网 页 布局 软件 有 Dreamweaver 和 FrontPage。 其 中 ，Dreamweaver 是 由 Adobe 
公司 开发 研制 的 ， 其 排版 能 力 较 强 ， 功 能 全 面 、 操 作 灵活 、 专 业 性 强 ， 因 而 受到 广大 网 站 
专业 设计 人 员 的 青睐 。FrontPage 作为 Microsoft 公司 的 办 公 软 件 之 一 ， 与 Office 的 其 他 软 
件 具 有 高 度 的 兼容 性 ， 界 面 规范 、 操 作 简捷 。 它 内 含 大 量 的 模板 ， 使 用 时 只 需 选择 相应 的 
命令 ， 设 置 相应 的 属性 即 可 使 用 ， 但 其 在 网 页 制作 方面 的 功能 不 如 Dreamweaver 强大 ， 目 
前 网 页 设计 者 大 多 使 用 Dreamweaver。 


2. 网 页 图 像 处 理 软 件 


图 像 处 理 的 软件 很 多 ，Photoshop 是 较为 常用 的 一 种 。 在 网 页 中 ， 图 像 是 通过 网 络 来 
进行 浏览 的 ， 所 以 文件 体积 一 般 要 求 尽量 小 ， 以 提高 网 络 的 传输 速度 ， 而 文件 格式 则 要 求 
能 被 大 多 数 浏览 器 所 兼容 ， 这 样 才 能 使 更 多 的 用 户 浏览 到 网 页 。 
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Fireworks 也 是 一 款 较 优秀 的 网 页 图 像 处 理 软 件 ， 它 具有 便捷 的 图 片 和 按钮 制作 功能 ， 
能 快速 地 生成 网 页 中 常用 的 GIF、PNG 和 JPEG 等 格式 图 像 。 


3.， 网 页 动画 制作 软件 


Flash 是 网 页 动画 制作 软件 之 一 ， 具 有 小 巧 、 灵 活 且 功能 强大 等 特点 。 使 用 Flash 制作 
的 动画 文件 很 小 ， 有 利于 网 上 发 布 。 此 外 ， 利 用 Flash 还 能 制作 出 有 交互 功能 的 矢量 平面 
动画 ， 其 强大 的 交互 功能 使 其 能 方便 地 与 其 他 网 页 建立 链接 关系 。 


二 和 
讲 了 那么 多 软件 , 我 听 得 头 都 作为 初学 者 ， 没 有 必要 掌握 SN\ = 1 


大 了 , 是 不 是 必须 把 每 一 种 软 每 一 种 软件 ， 只 要 学 好 了 
件 都 掌握 了 才能 制作 网 页 Dreamweaver 就 能 制作 出 精致 


啊 ? 那 多 麻烦 啊 ! 漂亮 的 网 页 ， 其 他 的 辅助 软件 
4 可 以 在 以 后 慢 慢 学 习 。 


| 魔法 档案 
网 页 制作 的 各 类 软件 是 相辅相成 的 ， 在 网 页 制作 过 程 中 应 注意 各 类 软件 之 间 的 协调 配合 ， 
让 各 类 软件 更 好 地 为 网 页 制作 服务 。 


1.3.3 网 页 制作 原则 


在 制作 网 页 的 过 程 中 需要 遵循 一 定 的 原则 ， 分 别 介绍 如 下 。 

党 ”站 点 名 要 有 新 意 : 为 站 点 命名 时 应 在 好 记 、 简 洁 和 与 站 点 内 容 相 对 应 的 基础 上 让 
人 有 耳目 一 新 的 感觉 。 通 常 有 创意 的 站 点 名 能 给 浏览 者 留 下 较 深 的 印象 ， 有 利于 
网 站 的 宣传 和 推广 。 

%* ”整体 规划 : 制作 网 页 之 前 ， 需 对 整个 站 点 的 内 容 进 行 有 条 理 的 规划 ， 为 以 后 能 合 
理 安排 站 点 中 的 各 项 内 容 提 供 方便 。 

党 ”动画 不 能 过 多 : 动画 元 素 可 以 使 网 页 更 加 生动 美观 ， 但 由 于 动画 文件 一 般 都 比较 
大 ， 过 多 的 动画 会 降低 网 页 下 载 速度 ， 甚 至 会 造成 网 页 很 难 打开 的 情况 ， 因 此 不 
宜 多 用 。 

党。 导航 条 要 明朗 : 主页 导航 条 上 的 链接 项 目 不 宜 太 多 、 太 过 繁 珊 ， 应 只 限于 几 个 主 
要 页 面 ， 一 般 用 6~ 8 个 链接 比较 合适 。 例 如 ， 一 个 学 校 网 站 可 以 包括 学 校 简介 、 
招生 对 象 和 院 系 介绍 等 主要 链接 。 

* 制作 通用 网 页 : 为 了 让 大 多 数 浏览 者 能 够 看 到 正常 的 网 页 显示 效果 ， 通 常 制 作 
1024 x 768 像素 的 网 页 。 用 较 漂亮 的 网 页 背景 来 填充 左右 两 侧 多 余 的 空白 空间 可 
使 1024 x 768 像素 的 网 页 在 分 状 率 高 的 显示 器 中 也 显得 很 美观 。 


0 


> 新 手 学 做 网 站 入 
学 ”主题 鲜明 : 主题 内 容 应 抢眼 醒目 ， 针 对 性 强 。 标 题 内 容 切 忌 太 长 、 太 复杂 ， 而 应 
简洁 、 明 了 。 


党 ”优化 图 像 : 和 动画 一 样 ， 图 片 太 多 也 会 影响 网 页 下 载 的 速度 ， 制 作者 可 对 网 页 中 
的 图 片 进 行 优化 ， 在 大 小 和 图 片 显示 质量 两 方面 取得 一 个 平衡 。 页 面 图 像 最 好 保 
持 在 10KB 以 下 ， 主 页 上 的 颜色 最 好 不 要 超过 64 种 。 

和 ”时 时 更 新 : 要 想 让 浏览 者 对 网 站 保持 一 种 新 鲜 感 ， 可 定期 更 新 主页 面 上 的 文本 、 


图 像 或 更 改 主页 的 样式 。 
~ 和 
A 小 魔女 ， 在 制作 网 页 时 ,遵从 了 ORG , 人 入 
对 ”万 。 这 些 原则 , 可 以 提高 网 页 的 访问 原来 网 页 制作 有 这 么 “了 了 了 他 
量 和 打开 速度 , 让 你 制作 的 网 页 多 规则 ， 我 可 要 好 好 
更 符合 Web 标准 。 J 记 住 。 
4 Wid 


1.4 如 何 建 立 网 站 


在 此 之 前 用 户 需 要 选择 建站 方式 ， 了 解 建 站 流程 。 下 面 将 详细 讲解 建站 方式 和 建站 的 


1.4.1 建站 方式 


在 Web 2.0 时 代 ， 建 站 方式 有 自助 建站 和 专业 设计 两 种 ， 其 特点 分 别 介绍 如 下 。 

党 ”自助 建站 : 自助 建站 就 是 通过 模板 和 预 建 的 模块 来 构建 网 站 的 Web 应 用 程序 , 可 
以 通过 所 见 即 所 得 的 方式 完成 网 站 内 容 和 网 站 布局 的 管理 。 随 着 科技 的 发 展 ， 现 
在 出 现 了 真正 的 傻瓜 智能 式 自助 建站 系统 ， 它 的 出 现 也 标志 着 自助 建站 系统 进入 
了 成 熟 阶段 。 

专业 设计 : 用 户 通过 软件 自行 设计 、 建 设 网 站 。 这 样 制作 出 的 网 站 更 具 专业 性 ， 
也 是 本 书 讲解 的 重点 。 学 完 本 书后 ， 用 户 即 可 根据 自己 的 需要 打造 符合 自己 要 求 
的 专业 网 站 。 


1.4.2 ”建站 流程 


初学 者 在 制作 网 站 时 ， 常 常 是 “ 丈 二 和 尚 一 一 摸 不 着 头脑 ”， 不 知 从 何 处 入 手 ， 下 面 
便 对 建站 流程 进行 介绍 。 
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1.， 收集 资料 


在 制作 网 站 前 应 先 收集 要 用 到 的 文字 资料 、 图 片 素材 和 动画 等 。 例 如 ， 制 作 学 校 网 站 
则 需要 学 校 提供 一 定 的 文字 材料 ， 如 学 校 简介 、 招 生 对 象 说 明 以 及 与 学 校 有 关 的 图 片 等 
若 制 作 个 人 网 站 ， 则 应 收集 一 些 个 人 简历 、 爱 好 等 方面 的 材料 ， 某 些 素材 也 可 从 网 上 下 载 ; 
制作 企业 网 站 则 应 收集 企业 的 介绍 、 产 品 信息 及 其 他 相关 资料 。 


2.， 站 点 规划 


在 规划 站 点 时 应 按 素材 的 不 同 种 类 创建 几 个 文件 夹 ， 然 后 将 收集 好 的 素材 分 类 放置 在 
相应 文件 夹 中 ， 再 在 站 点 中 将 不 同 的 素材 进行 细 分 ， 最 后 将 相关 的 资料 及 对 应 的 图 片 分 配 
到 一 个 一 个 的 网 页 中 ， 即 建立 站 点 地 图 。 


】 魔法 档案 
站 点 的 形式 有 并 列 、 层 次 和 网 状 等 ， 但 切记 无 论 采 用 哪 种 形式 都 要 给 各 个 站 点 定义 易于 记 
忆 的 主题 与 名 称 ， 且 上 传 到 网 上 的 站 点 名 称 必 须 是 英文 


3， 制 作 网 页 


一 个 网 站 通常 是 由 多 个 网 页 链接 构成 的 ， 要 让 浏览 者 更 轻松 地 浏览 网 站 ， 在 制作 时 一 
定 要 考虑 以 下 几 个 方面 。 
学 ”构建 页 面 框架 : 构建 页 面 的 框架 就 是 针对 导航 条 、 主 题 按钮 等 将 页 面 有 条 理 地 划 
分 为 几 部 分 ， 对 页 面 进行 宏观 的 布局 。 如 图 1-6 所 示 就 是 一 个 页 面 框架 。 


Dw >> BD 
和 7 
构建 页 面 框架 其 实 就 是 大 致 组 2 


Logo 和 广告 的 分 布 。 制 作 网 页 
前 一 定 要 布局 、 构 建 页 面 框架 。 Dy 


>、 


织 、 安排 网 页 的 内 容 , 如 导航 条 、 四 


图 1-6 页 面 框架 


创建 导航 条 : 在 网 站 的 任何 一 个 页 面 上 都 需 提供 各 个 站 点 的 相关 主题 ， 以 便 引导 
用 户 有 条 理 地 浏览 网 站 。 一般 的 网 站 都 是 在 页 面 的 上 部 或 左 侧 位 置 放置 网 站 的 导 
航 条 。 

填充 内 容 : 将 网 页 的 内 容 合 理 地 分 配 到 页 面 的 各 个 部 分 ， 并 插入 图 片 、Flash 等 。 
创建 返回 主页 链接 : 在 各 个 分 网 页 页 面 中 设置 返回 主页 的 链接 ， 便 于 用 户 快速 返 
回 到 主页 中 以 浏览 其 他 页 面 。 
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4.， 站 点 测试 


制作 完 网 页 后 ， 一 般 需要 对 站 点 进行 测试 。 站 点 测试 可 根据 客户 端的 要 求 、 网 站 大 小 
以 及 浏览 器 的 种 类 进行 , 一般 将 站 点 移动 到 一 个 模拟 调试 服务 器 上 对 站 点 进行 测试 或 编辑 。 
在 测试 站 点 时 应 注意 以 下 事项 ; 
党 ”在 创建 网 站 的 过 程 中 ， 由 于 各 站 点 的 重新 设计 、 重 新 调整 某 些 链接 所 指向 的 页 面 
可 能 已 被 移动 或 删除 ， 此 时 可 运行 链接 检查 报告 对 链接 进行 测试 ， 检 查 站 点 是 否 
有 断 开 的 链接 ， 若 有 ， 则 自动 重新 修复 断 开 的 链接 。 
党 ”监测 页 面 的 文件 大 小 以 及 下 载 速度 。 
党 ”对 浏览 器 兼容 性 的 检查 ， 可 使 页 面 不 支持 的 样式 、 层 、 插 件 等 在 浏览 器 中 能 兼容 
且 功 能 正常 。 使 用 “检查 浏览 器 ”行为 ， 可 自动 将 访问 者 重新 定向 到 另外 的 页 面 。 
使 用 这 种 方法 可 解决 在 较 早 版 本 的 浏览 器 中 根本 无 法 运行 页 面 的 问题 。 
党 ”在 不 同 的 浏览 器 和 平台 上 预览 页 面 可 以 查看 网 页 布局 、 字 体 大 小 、 闫 色 和 默认 浏 
览 器 窗口 大 小 等 ， 这 些 是 在 目标 浏览 器 检查 中 无 法 预见 的 。 


全 ~ DA A 
不断 地 对 6 点 进行 测试, 以 便 ,2087, MSE >» 六 
尽早 发 现 并 解决 问题 , 避免 以 作 网 页 时 我 会 对 站 点 随 ) 

后 重复 出 错 。 时 进行 测试 的 。 


BD 


二 ma 

LY™ 前 文档 进行 检查 前 ,首先 要 保存 该 文档 .Dreamweaver 只 对 文件 的 最 新 保存 执行 检查 ， 
而 不 检查 未 保存 的 更 改 。 通 过 站 点 测试 报告 可 解决 整个 站 点 的 问题 ， 如 无 标题 文档 、 空 标签 以 及 宛 
余 的 谋 套 标签 等 。 


5.， 网 页 发 布 


发 布 网 页 前 首先 应 在 Internet 上 申请 一 个 主页 空间 , 指定 网 站 或 主页 在 Intermet 上 的 位 
置 。 主 页 空间 的 申请 方法 将 在 第 2 章 详细 讲解 。 

发 布 网 页 可 直接 用 FrontPage 或 Dreamweaver 中 的 发 布 站 点 命令 进行 ,但 一 般 使 用 FTP 
(远程 文件 传输 ) 软件 上 传 到 服务 器 中 申请 的 网 址 目录 下 。 


6.， 站 点 的 更 新 与 维护 


站 点 上 传 到 服务 器 后 ， 并 非 万 事 大 吉 了 ， 每 隔 一 段 时 间 还 应 对 站 点 中 的 某 些 页 面 进行 
更 新 ， 保 持 网 站 内 容 的 新 鲜 感 ， 以 吸引 更 多 的 浏览 者 。 此 外 ， 还 应 定期 打开 浏览 器 检查 页 


RN 


‘wb 


As 


1.5 如 何 学 好 网 页 制作 


初学 者 学 习 网 页 制作 不 能 急于 求 成 ， 而 应 由 浅 入 深 、 循 序 渐进 。 想 要 更 好 、 更 快 地 学 

习 网 站 制作 ， 除 了 需要 勤奋 努力 之 外 ， 还 需要 培养 自己 的 审美 能 力 以 及 美术 基础 。 网 页 制 

作 的 学 习 方 法 与 经 验 介绍 如 下 。 

党 在 学 习 制 作 网 页 前 应 对 网 页 制作 的 各 类 软件 进行 一 些 了 解 ， 如 工作 环境 、 具 体 功 
能 等 ， 以 便 选择 适合 自己 使 用 的 软件 。 

学习 网 页 制作 应 遵循 由 吻 到 难 的 原则 ， 先 从 简单 的 入 手 ， 再 慢 慢 提升 制作 难度 ， 
以 达到 逐步 提高 网 页 制作 能 力 的 目的 。 

党 在 学 习 过 程 中 ， 不 能 一 味 地 学 习 理 论 知 识 ， 而 应 将 书本 知识 与 实际 操作 相 结 合 ， 
这 样 既 能 加 深 对 知识 点 的 印象 ， 也 能 提高 学 习 的 兴趣 。 在 学 习 时 除了 按 书 中 提供 
的 实例 进行 练习 外 ， 还 应 在 该 实例 的 基础 上 有 自己 的 创意 。 

光学 习 网 页 制作 的 初期 阶段 不 必 太 重视 网 页 制作 术语 ， 也 不 必 关 心太 多 的 网 页 代 
码 ， 如 Dreamweaver 和 FrontPage 之 类 的 网 页 制作 软件 是 所 作 即 所 见 的 直观 型 网 
页 制作 软件 ， 其 程序 设计 语言 自动 在 后 台 生 成 。 有 了 一 定 的 网 页 设计 基础 后 ， 再 
深入 学 习 一 些 编程 语言 (如 DHTML、JavaScript、XML 等 ) ,增强 网 页 动态 特效 。 

% 不 能 千篇一律 地 按 一 种 固定 的 模式 制作 网 页 ， 应 有 独特 的 风格 ， 这 样 才能 体现 出 
与 众 不 同 的 魅力 ， 吸 引 更 多 的 浏览 者 ， 提 高 网 页 人 气 。 

党 ”运用 模板 制作 网 页 可 提高 制作 速度 与 效率 ， 这 也 是 统一 网 页 风格 的 一 个 快捷 、 方 
便 的 途径 。 

澡 ”要 善于 借鉴 别人 的 优点 ， 取 长 补 短 。 平时 多 上 网 浏览 ， 将 风格 独特 、 别 具 匠 心 的 
网 页 保存 下 来 以 作 参 考 。 

澡 ”网 页 的 预览 和 调试 是 网 页 制作 中 非常 重要 的 一 环 ， 可 避免 网 页 出 现 错误 的 链接 或 
网 页 元 素 的 残缺 ， 因 此 详尽 的 测试 是 网 页 发 布 前 必须 进行 的 操作 。 


1.6 常见 问题 解答 


A. 魔法 师 ， 现 在 出 现 的 博客 应 该 属于 哪 一 类 网 站 呢 ? 
2£ 博客 的 英文 名 为 Webolg， 即 网 络 日 志 的 意思 ， 属 于 个 人 网 站 的 范畴 。 现 在 许多 门户 


网 站 都 增加 了 此 频道 ， 如 新 浪 、 网 易 、 搜 狐 等 。 建 立 属于 自己 的 博客 ， 是 自主 建站 
的 方式 ， 可 修改 性 较 小 ， 只 能 按照 网 站 提供 的 模板 进行 修改 。 


局 | 
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合 : 放流 岳 ， 如 果 我 要 制作 一 个 个 人 同 站 ， 应 该 在 嘱 里 收集 素材? 


全， 收集 素材 的 方式 有 许多 种 ， 可 以 在 互联 网 上 搜索 、 下 载 半 饰 个 人 网站 的 图 片 、 动 面 


以 及 文字 ,如 相框 、 花 边 、 线 条 ， 还 可 以 使 用 数码 相机 拍摄 一 些 现实 生活 中 的 照片 。 


候 ， 许 法 师 ， 起 收入 了 许多 素材 ， 但 它们 看 上 去 部 杂 屯 无 章 ， 在 制作 时 ， 总 要 花费 很 攻 
时 间 查找 自己 需要 的 素材 ， 有 没有 更 好 的 方法 找到 需要 的 素材 中? 


读 h， 答案 是 肯定 的 ， 当 你 收集 到 素材 后 ， 将 其 进行 分 类 保存 即 可 避免 这 种 情况 。 


1.7 过 关 练 习 


启动 浏览 器 ， 在 正 地 址 栏 输入 “www.zol.com.cn”， 打 开 网 页 ， 指 出 网 页 的 导航 条 、 
网 页 图 像 与 动画 ， 如 图 1-7 所 示 。 
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~ ps ~ 
‘ 一 学 就 会 斋 法 书 里 


创建 网 站 前 的 准备 


规划 网 站 
搭建 网 站 运行 平台 
创建 站 点 
发 布 站 点 


典型 实例 一 构建 网 站 服务 平 
Am 


小 魔女 : 


魔法 师 : 


小 魔女 : 
魔法 师 : 


旬 0 乡 媒体 教学 演示 : 34 分 名 


魔法 师 ， 您 讲 了 这 人 么 多 ， 现 在 
可 以 正式 开始 制作 网 站 了 吧 ? 
你 总 是 心太 急 ， 在 正式 制作 网 
站 之 前 还 需要 做 奶 多 准备 工作 
以 及 学 习 一 些 预备 知识 。 

有 哪些 预备 知识 呢 ? 
比如 说 规划 网 站 、 安 装 网 页 的 
运行 环境 、 建 立 站 点 文件 夹 和 
创建 站 点 等 。 


: 魔法 师 ， 您 总 是 提 到 站 点 ， 什 


么 是 站 点 呢 ? 


: 不 慌 了 吧 ， 那 你 就 慢 慢 听 我 


讲 吧 ! 


; 好 "有 。 
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2.1 规划 网 站 


一 个 网 站 一 般 都 会 包含 若干 文件 和 文件 夹 ， 这 些 文件 与 文件 、 文 件 夹 与 文件 夹 、 文 件 
与 文件 夹 之 间 都 存在 着 某 种 必然 的 联系 ， 所 以 在 创建 站 点 前 首先 要 做 的 就 是 规划 网 站 ， 只 
有 清楚 地 理解 站 点 的 框架 ， 包 括 主页 面 、 次 页 面 和 相应 文件 夹 的 关系 后 ， 才 能 创建 出 合理 
的 网 站 。 


2.1.1 站 点 的 概念 


通过 各 种 链接 关联 起 来 的 多 个 网 页 文档 就 构成 了 站 点 ， 站 点 可 以 只 有 一 个 网 页 ， 也 可 
以 有 许 许多 多 的 网 页 。 站 点 可 以 只 有 一 个 网 页 ， 也 可 以 有 许 许多 多 的 网 页 。 

站 点 一 般 分 为 3 大 类 ， 即 本 地 站 点 、 远 程 站 点 和 测试 站 点 。 用 户 可 通过 本 地 站 点 和 远 
程 站 点 在 本 地 磁盘 和 Web 服务 器 之 间 传 输 文 件 , 而 测试 站 点 则 用 于 对 动态 站 点 的 测试 。 各 
个 站 点 的 功能 与 作用 分 别 介绍 如 下 。 

党 ”本 地 站 点 : 本 地 站 点 是 用 户 工作 的 目录 ， 是 存放 用 户 网 页 、 素 材 等 文件 的 本 地 文 

件 夹 ， 在 制作 一 般 网 页 时 只 需 建 立 本 地 站 点 即 可 。 

% ”远程 站 点 : 若 需要 在 不 连接 Internet 的 情况 下 对 所 建 的 站 点 进行 测试 、 修 改 ， 可 

在 本 地 计算 机 上 创建 远程 站 点 模拟 真实 的 Web 服务 器 环境 进行 测试 。 
党 ”测试 站 点 : 测试 站 点 主要 是 在 针对 动态 页 面 进行 测试 时 使 用 ， 是 Dreamweaver 处 

理 动态 页 面 的 文件 夹 。Dreamweaver 使 用 此 文件 夹 生成 动态 内 容 并 在 工作 时 连接 


到 数据 库 。 
py > 
< ~、 小 并 女 , 其实 站 点 也 是 一 种 广 ns 
档 的 磁盘 组 织 形式 , 它 同样 是 魔法 师 , 我 明白 了 , 站 “站 
由 文档 和 文档 所 在 的 文件 夹 点 其 实 训 是 文档 , 只 是 。。”)| 
组 成 。 它 有 特殊 的 功能 。 1 
坊 。 4 SS : 


2.1.2 ”规划 站 点 的 结构 


站 点 结构 的 规划 是 设计 站 点 前 的 必要 工作 ， 在 这 个 阶段 设计 者 应 建立 不 同 的 文件 夹 ， 
将 不 同 的 网 页 内 容 分 门 别 类 地 保存 。 合 理 地 组 织 站 点 结构 ， 可 提高 工作 效率 ， 加 快 对 站 点 
的 设计 ， 对 后 期 维护 也 有 极 大 的 好 处 。 

在 规划 站 点 时 应 首先 在 电脑 硬盘 上 创建 一 个 文件 夹 ， 将 所 有 在 制作 过 程 中 创建 和 编辑 
的 网 页 内 容 都 保存 在 该 文件 夹 中 。 当 需要 发 布 站 点 时 ,直接 将 该 文件 夹 上 传 到 Web 服务 器 
上 即 可 。 如 果 素材 种 类 较 多 ， 站 点 较 大 ， 则 还 需要 建立 子 文件 夹 以 存放 不 同类 型 的 网 页 


RN 
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内 容 。 
在 站 点 规划 中 使 用 合理 的 文件 名 称 、 文 件 夹 名 称 也 是 十 分 重要 的 ， 好 的 文件 名 不 仅 容 
易 理解 ， 更 能 充分 体现 网 页 的 内 容 。 在 命名 时 ， 可 以 采用 与 其 内 容 相同 的 英文 或 者 拼音 命 
名 ， 不 能 使 用 长 文件 名 和 中 文 ， 如 图 片 文件 夹 可 以 命名 为 image 或 pic。 

制作 网 页 所 需 的 图 片 或 者 动画 等 多 媒体 文件 所 存放 的 位 置 对 站 点 结构 的 规划 是 十 分 
重要 的 。 如 果 是 大 型 站 点 ， 可 分 别 创建 不 同 的 文件 夹 存放 不 同类 型 的 文件 ， 如 在 站 点 下 创 
建 一 个 名 为 swf 的 文件 夹 ， 用 于 存放 网 页 中 所 需要 的 动画 ， 如 果 内 容 较 少 ， 则 可 在 站 点 的 
根 目 录 下 创建 一 个 文件 夹 或 不 创建 文件 夹 。 


wl 魔法 档案 ~、® 
站 点 下 的 文件 夹 与 文件 命名 时 ， 应 该 区 在 构建 站 点 时 , 可 将 所 有 的 文 


分 大 小 写 , 因为 很 多 Web 服务 器 使 用 的 是 英文 操作 件 夹 和 文件 都 统一 用 小 写 的 
系统 或 UNIX 操作 系统 ， 在 UNIX 操作 系统 中 是 要 |。 英文 字 田 后 局。 

区 分 大 小 写 的 ， 如 music .htm 和 music.HTM 会 被 4 
Web 服务 器 视 为 两 个 不 同 的 文件 。 wid 


2.1.3 制作 出 网 站 结构 图 


做 完 站 点 的 规划 后 ， 用 户 可 以 根据 规划 制作 出 一 个 网 站 结构 图 ， 以 帮助 其 他 合作 者 理 
解 自己 的 思路 ， 并 明确 网 页 之 间 的 关联 。 在 制作 时 可 直接 在 纸 上 粗 略 地 绘 出 导航 草图 ， 如 
图 2-1 所 示 。 


西南 传媒 大 学 网 站 首页 


图 2-1 导航 草图 


】 魔法 档案 
制作 完 草 图 后 ， 接 下 来 应 确定 站 点 的 风格 ,也 就 是 对 整个 站 点 的 样式 和 版 面 进 行 设计 。 在 
制作 大 概 的 草图 时 ， 可 使 用 Photoshop 软件 进行 绘制 。 


; 
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2.2 搭建 网 站 运行 平台 


一 个 网 站 要 想 很 好 地 运行 ， 必 须 使 用 一 款 优秀 的 服务 器 软件 搭建 一 个 平台 ， 如 PHP、 
ASP 和 ASPNET 等 ， 本 书 采用 PHP 来 作为 服务 器 软件 。 


2.2.1 如 何 寻找 PHP 网 页 服务 器 软件 


PHP 的 服务 器 一 般 都 是 Apache， 但 是 只 安装 了 Apache 还 是 不 能 运行 PHP， 只 能 运行 
HTIML， 要 想 运行 PHP， 还 需要 安装 PHP 插件 ， 安 装 后 要 修改 大 篇 幅 的 参数 ， 这 种 操作 对 
于 初学 者 来 说 十 分 麻烦 。 初 学 者 可 以 在 网 上 搜索 适合 自己 的 PHP 傻瓜 集合 包 ， 如 
Apache+PHP+MYySQL 服务 器 套件 、PHPStudy、PHPnow 等 一 些 傻瓜 服务 器 软件 ， 找 到 后 
将 其 安装 到 电脑 中 即 可 运行 PHP。 这 些 傻瓜 集合 包 可 以 很 方便 地 在 各 大 下 载 网 站 找到 ， 如 
新 浪 下 载 频道 就 可 以 下 载 PHPnow， 如 图 2-2 所 示 。 
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单 击 它 可 下 载 
此 软件 


pd 
> 如 果 需 要 最 新 版 本 的 
上 PHPnow， 可 以 在 其 官方 网 


站 www.phpnow.org 中 下 载 。 


】 。 魔法 档案 
运行 PHP 除了 可 以 使 用 Apche 服务 


器 以 外 ， 还 可 以 使 用 IS。 安 装 好 IIS 后 ， 也 需 
要 安装 PHP 插件 进行 配置 ， 才 能 运行 PHP。IIS 
虽然 可 以 调试 和 运行 PHP， 但 其 兼容 性 不 如 
Apache， 所 以 建议 读者 不 要 使 用 IIS。 


-一 此 证 | 
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2.2.2 安装 PHPnow 


PHPnow 集合 了 PHP 所 需 的 软件 ,下载 PHPnow 后 将 其 解压 , 然后 将 其 复制 到 DD 盘 根 
目录 下 进行 安装 即 可 运行 PHP 程序 。 具 体操 作 如 下 : 
步 又 1 选择 PHPnow-1.4.5-22 并 右 击 ， 在 弹出 的 快捷 莱 单 中 选择 “ 重 命名 ”命令 ， 
将 文件 夹 命名 为 PHPnow。 
步骤 2 双击 PHPnow 文件 夹 将 其 打开 ,从 中 双击 Init.cmd 文件 ,打开 “初始 化 PHPnow 
1.4.5” 窗 口 ， 系 统 将 自动 安装 。 在 安装 过 程 中 会 提示 用 户 设置 MySQL 数据 
库 密 码 ， 如 图 2-3 所 示 。 
步骤 3 输入 密码 后 按 【Enter】 键 ， 然 后 按 任意 键 完成 安装 ， 此 时 将 自动 打开 一 个 测 
试 网 页 ， 如 图 2-4 所 示 。 
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图 2-3 “初始 化 PHPnow 1.4.5” 窗 口 图 2-4 测试 网 页 


魔法 档案 

在 安装 PHPnow 时 ， 一 定 要 避免 端口 的 重复 。 例如， 如果 安 装 了 IIS， 就 不 能 再 使 用 80 
端口 ， 因 为 Apache 的 默认 端口 也 是 80。 用 户 可 以 在 “默认 网 站 属性 ”对 话 框 中 修改 IIS 的 端口 号 ， 
或 者 在 安装 Apache 时 选择 其 他 的 端口 进行 安装 。 如 果 端 口号 重复 ， 软 件 将 会 自动 提示 。 


2.2.3 ”修改 站 点 配置 


安装 完 软件 后 , 用户 还 可 对 其 服务 器 进行 停 用 、 外 载 等 操作 。 其 操作 方法 也 十 分 简单 ， 
双击 PnCp.cmd 文件 ， 打 开 “PHPnow 1.4.5 控制 面板 ”窗口 ， 输 入 相应 的 数字 ， pd 
相应 的 命令 。 例 如 ， 输 入 “13” 后 ， 按 【Enter】 键 即 可 执行 “更 改 Apache 端口 ”命令 ， 
如 图 2-5 所 示 即 为 相关 的 人 令 提示 。 


新 手 学 做 网 站 


图 2-5 PHPnow 1.4.5 控制 面板 


2.2.4 phpMyAdmin 


MySQL 数据 库 本 身 没 有 可 视 化 操作 界面 ， 但 是 用 户 安装 PHPnow 后 ， 其 中 有 一 个 
phpMyAdmin 工具 ， 用 户 可 以 通过 它 来 管理 MySQL 数据 库 。 具 体操 作 如 下 : 
和 步骤 1 打开 浏览 器 ， 在 地 址 栏 中 输入 “http://127.0.0.1/phpmyadmin/”， 将 会 打开 一 
个 网 页 ， 在 其 中 的 “登入 名 称 ” 和 “密码 ”文本 框 中 输入 相应 的 信息 ， 然 后 
单 击 芍 告 ] 按 钮 ， 如 图 2-6 所 示 。 
和 步骤 2 在 打开 的 页 面 中 可 以 进行 创建 用 户 、 数 据 库 等 操作 ， 如 图 2-7 所 示 。 关 于 如 
何 操作 数据 库 将 在 第 13 章 讲解 ， 这 里 不 再 袭 述 。 
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图 2-6 phpMyAdmin 登录 界面 图 2-7 MySQL 管理 界面 


@ EE 


a 
a 第 2 章 创建 网 站 前 的 准备 暗 法 书 


2.2.5” 写 第 一 个 网 页 程序 


搭建 好 了 网 站 运行 平台 ， 接 下 来 写 一 个 网 页 程序 。 这 个 网 页 程序 是 通过 “记事 本 ” 写 
的 ， 这 样 写 本 身 来 说 没有 任何 意义 ， 但 是 有 助 于 初学 者 对 网 页 程序 的 认识 ， 并 且 可 以 测试 
我 们 搭建 的 平台 。 下 面 以 在 一 个 网 页 中 显示 “我 是 网 页 初学 者 ， 我 会 赢 ! ”为 例 ， 将 字体 
设置 成 “红色 ”、“25 号 ”显示 ， 具 体操 作 如 下 。 
步骤 1 启动 “记事 本 ”, 输入 <html> 标 签 、<head> 标 签 和 <body> 标 签 ， 如 图 2-8 所 示 。 
步骤 2 ”在 <head> 标 签 里 输入 <title> 标 签 (用 来 定义 网 页 的 标题 ) ， 在 该 标签 里 输入 
“我 是 网 页 初学 者 ， 我 会 赢 ”; 然后 在 <head> 标 签 里 输入 “<meta http-equiv 
="Content-Type" content="text/html; charset=utf-8" />”， 表 示 整 个 页 面 以 中 文 
字符 显示 。 
步骤 3 在 <body> 标 签 里 输入 <span> 标 签 ， 然 后 在 <span> 标 签 里 输入 “我 是 网 页 初学 
者 ， 我 会 赢 ! ”， 然 后 在 <head> 标 签 里 输入 格式 代码 ， 如 图 2-9 所 示 。 


外 无 标题 - 记事 本 


1 Se 
Na 入 ¢ 网 


小 魔女 ，HTML 中 的 标签 


都 是 由 首 、 尾 标签 组 成 ， 
如 <body> 标 签 由 <body> 
标签 和 </body> 标 签 组 成 。 
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2-8 输入 3 个 标签 图 2-9 输入 格式 代码 


Ww 魔法 档案 

如 图 2-9 所 示 的 代码 定义 了 字体 的 格式 ， 定 义 格式 的 这 段 代码 有 一 个 专业 的 名 称 ， 即 CSS 
样式 表 。CSS 样式 表 的 操作 将 在 后 面 章节 中 讲解 ， 这 里 不 再 次 述 。 虽 然 这 里 定义 了 格式 ， 但 是 字体 
并 不 能 按 格式 显示 ， 因 为 <span> 标 答 还 没有 调用 它 。 


步骤 4 在 <span> 标 签 中 调用 格式 ， 将 <span> 的 首 标 签 修改 成 “<span class="first">” 
即 可 。 

步骤 5 将 “记事 本 ”文档 保存 在 网 站 服务 器 指定 的 位 置 ， 即 “D:\PHPnow\htdocs\” 
下 。 将 其 命名 为 frist， 然 后 将 frist.txt 修改 为 first.html。 在 此 过 程 中 将 会 弹出 
“ 重 命名 ”提示 对 话 框 ， 在 其 中 单 击 臣 可 本 按钮 ， 如 图 2-10 所 示 。 

步 又 6 启动 正 浏览 器 ， 在 地 址 栏 中 输入 “http://127.0.0.1/frist.html”， 即 可 得 到 如 
图 2-11 所 示 结 果 (光盘 :\ 最 终 效 果 \ 第 2 章 \frist.html ) 。 
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图 2-10 “ 重 命名 ”对 话 框 2-11 最 终 效果 


23 创建 站 点 


创建 完 第 一 个 网 页 后 , 是 不 是 有 一 点 点 成 就 感 了 ? 不 过 这 样 不 符合 “规划 站 点 的 结构 ” 


的 原则 ， 不 利于 管理 及 操作 ， 所 以 在 创建 网 页 前 应 先 创建 一 个 站 点 。 
2.3.1 怎样 创建 站 点 


前 文 提 及 需要 用 一 个 文件 夹 来 存放 站 点 中 的 所 有 文件 ， 因 此 在 创建 站 点 之 前 ， 应 在 


“Di\PHPnow\htdocs” 目 录 下 建立 一 个 文件 夹 (如 mysite) ， 然 后 再 创建 站 点 。 有 具体 操作 
如 下 : 


A 


步骤 ] 进入 Dreamweaver CS3 工作 界面 后 ,选择 【窗口 〗/【 文 件 ] 命 令 打 开 “ 文 件 ” 
面板 ， 如 图 2-12 所 示 。 
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2-12 “文件 ”面板 


步 又 2 在 “文件 ”面板 中 下 拉 列 表 框 中 选择 “管理 站 点 ”选项 ， 如 图 2-13 所 示 ， 弹 
出 “管理 站 点 ”对 话 框 ， 单 击 医 建 四 .按钮 ， 如 图 2-14 所 示 。 
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2-13 选择 “管理 站 点 ”选项 图 2-14 “管理 站 点 ”对 话 框 


步 又 3 在 弹出 的 菜单 中 选择 “站 点 ”命令 ， 弹 出 “未 命名 站 点 1 的 站 点 定义 为 ”对 
话 框 , 在 “您 打算 为 您 的 站 点 起 什么 名 字 ? ”文本 框 中 输入 所 需 的 站 点 名 称 ， 
如 “mysite”。 

步骤 4 在 “您 的 站 点 的 HTTP 地 址 (URL) 是 什么 ”文本 框 中 输入 网 站 地 址 ， 如 
“http:/127.0.0.l/mysite”， 单 击 区 = 此 四 习 按 钮 ， 如 图 2-15 所 示 。 

步 又 5 在 弹出 的 对 话 框 中 选中 @@ 距 7 苇 天 入 用 服 营 时 | 单 选 按钮 ， 在 “ 哪 种 服务 
器 技术 ”下 拉 列 表 框 中 选择 PHP MySQL 选项 ， 如 图 2-16 所 示 。 
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图 2-15 命名 站 点 图 2-16 选择 服务 器 技术 


步 又 6 单 击 EEEEw 习 按钮 ， 在 弹出 的 对 话 框 中 选中 OR 六 和 WC 和 9 罗 并 本 这 和 计 灶 机 7| 
单 选 按钮 , 单 击 “ 您 将 把 文件 存储 在 计算 机 上 的 什么 位 置 ? ”文本 框 后 的 “ 浏 
览 ”按钮 已 ， 选 择 建立 的 路 径 ， 单 击 医 2@3 按 钮 ， 如 图 2-17 所 示 。 

步 又 7 在 弹出 的 对 话 框 的 “您 应 该 使 用 什么 URL 来 浏览 站 点 的 根 目录 ? ”文本 框 
中 输入 “http:/127.0.0.1/mysite/” ， 单 击 Cg] 按钮 。 稍 修 片 刻 弹出 对 话 杠 
提示 用 户 测试 成 功 。 单 击 亡 枉 按钮， 然后 单 击 攻 2@ 习 按钮 ， 如 图 2-18 
所 示 。 
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2-17 选择 文件 存储 位 置 2-18 ”输入 测试 浏览 站 点 的 根 目录 


步 又 8 在 弹出 的 对 话 框 中 选中 四 和 苦 7 不 让 用 存 回 和 和 取 阳 ; 面 单 选 按钮 ， 单 击 EEE@ 习 按钮 ; 
弹出 “总 结 ” 对 话 框 ， 单 击 CBE@ 按钮 ， 如 图 2-19 所 示 。 

步骤 9 返回 到 “管理 站 点 ”对 话 框 ， 单 击 CEEg 按 钮 ， 即 可 看 到 定义 的 站 点 ， 如 
图 2-20 所 示 。 
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图 2-19 “总 结 ” 对 话 框 2-20 建立 好 的 站 点 


着 mr 
试 着 按照 上 文 所 讲 的 内 容 在 


we 
创建 好 站 点 后 , 就 
“DAPHPnowhtdocs” 目 录 下 创建 一 个 myhome 可 以 开始 制作 网 
用 | 文件 夹 ， 然 后 在 Dreamweaver 中 创建 一 个 名 为 页 了 。 
myhome 的 站 点 。 
“Wy 
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2.3.2 ”做 好 站 点 管理 


创建 站 点 完成 后 ， 即 可 对 站 点 进行 管理 。 这 个 步骤 相当 重要 ， 只 有 将 站 点 的 文件 和 文 
件 夹 管理 得 井井有条 ， 后 面 的 工作 才能 顺利 进行 。 


1.， 在 站 点 中 添加 新 文件 或 文件 夹 


在 站 点 中 添加 新 文件 或 文件 夹 与 在 Windows 中 新 建文 件 或 文件 夹 的 操作 类 似 , 如 要 在 
mysite 站 点 中 添加 一 个 images 文件 夹 用 来 存放 站 点 中 用 到 的 图 片 ， 具 体操 作 如 下 : 

步 又 1 选择 【站 点 〗»/【 管 理 站 点 】 命 令 打 开 “ 文 件 ” 面 板 ， 在 所 需 的 根 目录 图 标 上 
右 击 ， 在 弹出 的 快捷 菜单 中 选择 “新 建文 件 夹 ” 命 令 ， 如 图 2-21 所 示 。 

步骤 2 Dreamweaver CS3 将 自动 在 根 目录 下 创建 一 个 名 为 untitled 的 文件 夹 ， 如 
图 2-22 所 示 。 

步 又 3 刚 建 好 的 文件 夹 的 名 称 处 于 改写 状态 ， 读 者 可 根据 需要 输入 文件 夹 名 ， 这 里 
将 文件 夹 命名 为 images， 按 【Enter】 键 确认 ， 如 图 2-23 所 示 。 
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图 2-21 过 < 新 建文 件 ， 命令 图 2-22 新 建 的 文件 夹 图 2-23 已 输 入 名 称 的 文件 夹 


魔法 档案 
新 建文 件 的 方法 与 新 建文 件 夹 的 方法 十 分 类 似 , 在 如 图 2-21 所 示 的 快捷 菜单 中 , 选择 “新 
建文 件 ”命令 即 可 ， 后 面 的 操作 相同 。 


2. 删除 文件 或 文件 夹 


如 果 不 再 需要 站 点 下 的 某 些 文件 和 文件 夹 ， 可 以 将 其 删除 。 删 除 文件 和 文件 夹 的 方法 
类 似 ， 选 择 需 要 删除 的 文件 或 文件 夹 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【编辑 】/【 删 除 】 
命令 ; 或 者 选择 需要 删除 的 文件 或 文件 夹 后 按 【Delete】 键 ， 在 弹出 的 确认 对 话 框 中 单 击 
马术 5] 按钮 ， 即 可 将 其 删除 。 
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3.， 重 命名 文件 或 文件 夹 


为 了 方便 识别 ， 我 们 需要 将 文件 名 或 文件 夹 名 修改 得 更 加 直观 ， 这 时 就 需要 对 文件 或 
文件 夹 重 命名 。 其 操作 方法 十 分 简单 ， 选 择 需 重 命名 的 文件 或 文件 夹 后 右 击 ， 在 弹出 的 快 


捷 菜 单 中 选择 【编辑 】/【 重 命名 】 命 令 ， 然 后 输入 新 的 名 称 即 可 ， 如 图 2-24 所 示 。 


新 建文 件 任 ) 
新 建文 件 来 人) 
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打开 方式 中 


图 2-24 重 命名 文件 或 文件 夹 


4. 编辑 文件 


双击 需要 编辑 的 文件 图 标 ， 即 可 打开 该 文件 ， 进 入 编辑 窗口 进行 编辑 。 关 于 如 何 进行 
编辑 ， 在 后 面 的 章节 中 将 详细 讲解 。 


5. 删除 站 点 


当 不 需要 某 一 个 站 点 ， 或 对 某 个 站 点 无 须 进行 任何 操作 时 ， 可 以 将 该 站 点 从 站 点 列表 
中 删除 。 有 具体 操作 如 下 : 
步 又 1 选择 【站 点 】/【 站 点 管理 】 命 令 ， 弹 出 如 图 2-25 所 示 的 “管理 站 点 ”对 话 
框 ， 在 左 侧 列表 框 中 选择 要 删除 的 站 点 后 单 击 [_ 红 加 ] 按 钮 。 


步骤 2 ”弹出 警告 对 话 框 ， 提 示 执 行 本 操作 后 将 不 能 撤销 ， 单 击 世 是 
图 2-26 所 示 。 


图 2-25 “管理 站 点 ”对 话 框 图 2-26 警告 对 话 框 
步骤 3 返回 “管理 站 点 ”对 话 框 ， 可 以 看 见 站 点 已 被 删除 ， 单 击 志 本 面 按钮 完成 
未 , ， 


一 学 会 谋 法 书 阐 


us 
a 第 2 章 创建 网 站 前 的 准备 上 阅 法 书 , 


删除 站 点 的 操作 ， 如 图 2-27 所 示 。 


过 魔法 档案 
从 “管理 站 点 " 对 话 框 中 删除 站 点 只 


是 删除 Dreamweaver 同 本 地 站 点 的 链接 关系 ， 
并 没有 从 硬盘 上 删除 本 地 站 点 。 单 击 “管理 站 
点 ”窗口 中 的 [ 嘱 旱 加 .按钮 新 建 一 个 站 点 ， 选 
择 与 删除 站 点 相同 的 保存 文件 夹 即 可 恢复 删除 
的 站 点 。 


2-27 ”站 点 已 被 删除 


6.， 编辑 站 点 


在 新 建站 点 时 ， 设 置 的 站 点 信息 有 可 能 不 符合 自己 的 需要 ， 此 时 可 以 对 其 进行 编辑 。 
具体 操作 如 下 : 
四 又] 选择 【站 点 】/【 管 理 站 点 】 命 令 ， 弹 出 “管理 站 点 ”对 话 框 ， 选 中 需要 编辑 
的 站 点 ， 这 里 选中 mysite 站 点 ， 如 图 2-28 所 示 。 
密 缀 3 单 击 [二 和 加 按钮， 弹出 “mysite 的 站 点 定义 为 ”对 话 框 ， 在 其 中 即 可 对 站 
点 进行 编辑 。 其 操作 过 程 和 创建 站 点 的 过 程 基本 相同 ， 只 需 按 提示 进行 操作 
即 可 ， 如 图 2-29 所 示 。 


图 2.28 “管理 站 点 ” 对话 杠 图 2.29 编辑 站 点 
9 
者 关 力 Ut 
| 试 试 编辑 一 下 创建 的 myhome 站 点 ， 进 行 重 命名 、 删 除 站 点 等 操作 。 | 
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新 手 学 做 网 站 


网 站 制作 完成 
首先 应 申请 一 个 空 


在 选择 主页 空 
动态 技术 条 件 等 因 


请 免费 空间 。 


如 下 : 
步 驿 ] 启动 
开 网 


24 发 布 站 点 


后 , 为 了 让 更 多 人 看 到 ,必须 将 站 点 发 布 到 互联 网 。 要 发 布 自己 的 网 站 ， 
间 ， 然 后 进行 本 地 测试 ， 最 后 再 发 布 站 点 。 


2.4.1 申请 域名 及 主页 空间 


间 时 ， 可 根据 网 站 性 质 、 网 站 文件 大 小 、 网 站 运行 的 操作 系统 、 网 站 的 
素 选择 相应 的 空间 大 小 及 类 型 ， 如 商业 网 站 、 公 司 网 站 需要 较为 稳定 的 


运行 环境 ， 最 好 选择 收费 的 主页 空间 ， 如 果 是 一 般 的 用 于 学 习 或 者 娱乐 的 个 人 网 站 ， 可 申 


1.， 申 请 免费 域名 及 主页 空间 


在 网 络 中 ， 提 供 免费 域名 和 主页 空间 的 网 站 很 多 ， 申 请 的 流程 大 致 相同 。 下 面 以 在 
http://www.5944.net/ 中 申请 免费 域名 及 主页 空间 为 例 ， 详 细 讲 解 申 请 的 流程 。 具 体操 作 


正 浏览 器 ， 在 地 址 栏 中 输入 “http://www.5944.net/”， 按 【Enter]】 键 打 
页 ， 单 击 世 于 校 钮 ， 如 图 2-30 所 示 。 
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步骤 3 单 击 


步 又 4 单 击 
输入 


图 2-30 打开 申请 免费 空间 页 面 图 2-31 填写 注册 信息 


[J 按钮， 如 果 用 户 注册 信息 填写 正确 ， 将 弹出 注册 成 功 页 面 ， 如 


图 2-32 所 示 。 


EEBg 按 钮 ， 返 回 到 登录 时 的 页 面 ， 在 “用 户 名 ”和 “密码 ”文本 框 中 
刚才 注册 会 员 时 输入 的 相应 “用 户 名 ”和 “密码 ”， 并 单 击 世 于 按钮 。 
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步 又 5 在 弹出 对 话 框 中 单 击 志 am 按钮， 下 次 进入 该 网 站 时 ， 将 自动 登录 页 面 

步骤 6 在 弹出 的 页 面 中 将 显示 出 用 户 的 相应 信息 ， 单 击 点 这 里 开通 免费 空间 超 链接 。 

步 又 7 弹出 服务 条 款 页 面 ， 认 真 阅读 其 中 的 文本 ， 对 文本 中 的 信息 确认 无 误 后 单 击 
国 国 校 钮 ， 如 图 2-33 所 示 。 
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图 2-32 提示 页 面 图 2-33 同意 协议 


步骤 8 在 弹出 页 面 中 输入 相应 的 信息 ， 然 后 单 击 - 况 9 汪 | 按钮 ， 如 图 2-34 所 示 。 
步 又 9 完成 免费 空间 的 申请 ， 并 自动 为 空间 配置 一 个 免费 域名 ， 如 图 2-35 所 示 。 
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2-34 填写 申请 信息 图 2-35 ”完成 免费 空间 及 域名 的 申请 


2. 申请 收费 域名 和 收费 空间 


想 要 享受 运营 商 提 供 的 更 优质 的 服务 ， 则 必须 申请 收费 域名 和 收费 空间 。 其 方法 也 十 
分 简单 ， 打 开 相 关 网 站 ， 如 http://www.net.cn/， 在 “域名 查询 ” 栏 的 文本 框 中 输入 需要 注 


We 并 


Ss 法 
i 新 手 学 做 网 站 二 


册 的 域名 ， 这 里 输入 “weimeil”， 在 其 下 方 选择 需要 查看 的 域名 类 型 ， 然 后 单 击 磊 十 河 按 
钮 ， 将 弹出 如 图 2-36 所 示 的 页 面 。 
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图 2-36 查询 域名 

如 果 域 名 已 被 注册 ， 则 需要 输入 其 他 的 域名 ， 如 果 域 名 未 被 注册 ， 则 应 及 时 向 域名 注 
册 机 构 申请 注册 。 在 网 上 申请 域名 时 需要 填写 相应 的 个 人 或 单位 资料 ， 申 请 国内 域名 还 需 
单位 加 盖 公 章 后 方 可 办 理 。 在 填写 资料 时 , 个 人 的 地 址 信息 及 其 他 联系 信息 如 电话 、E-mail 
等 也 需 填写 ， 以 便 联系 。 域 名 申请 成 功 后 ， 通 常 还 需要 将 该 域名 指向 自己 的 主页 空间 ， 以 
便 用 户 能 通过 该 域名 访问 到 对 应 的 网 页 内 容 。 

收费 域名 申请 成 功 后 ， 可 以 申请 收费 空间 。 申 请 收费 空间 的 方法 与 申请 免费 空间 的 方 
法 大 致 相同 ， 在 相应 的 页 面 中 ， 输 入 相关 的 信息 ， 然 后 按照 向 导 提示 一 步 步 操作 ， 即 可 成 
功 申请 收费 空间 。 


户 。 在 此 提醒 读者 在 使 用 收费 空间 时 ， 建 议 先 试用 一 阵子 ， 满 意 后 再 向 服务 商 付款 购买 此 空间 


】 厢 法 档案 
| 收费 网 站 空间 通常 会 提供 一 段 时 间 的 试用 期 ， 可 以 先 试用 ， 如 果 满 意 再 付款 ， 成 为 正式 用 


2.4.2 发布 网 站 


申请 了 域名 及 主页 空间 后 ， 即 可 将 制作 的 网 站 发 布 到 空间 中 以 供 其 他 用 户 浏览 。 发 布 
网 站 要 用 到 FTP 上 传 工具 ， 目 前 主流 的 上 传 工具 有 LeapFTP、FlashFXP 、CuteFTP 等 ， 
这 里 以 LeapFTP 为 例 进行 讲解 。 具 体操 作 如 下 : 

步 又 1 启动 LeapFTP 软件 ， 在 其 工作 界面 中 单 击 工具 栏 中 的 医 按 钮 ， 弹 出 “站 点 管 

理 器 ”对 话 框 。 
步 又 2 在 该 对 话 框 左上 方 的 下 拉 列 表 框 中 选择 Archive 选项 ， 单 击 EEBS 按钮 ， 弹 
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步骤 3 ”返回 “站 点 管理 器 ”对 话 框 ， 
钮 应 用 设置 ， 如 图 2-38 所 示 。 


图 2-37 输入 站 点 名 


如 图 2-40 所 示 。 
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出 “添加 站 点 ”对 话 框 ， 在 “输入 站 点 名 ”文本 框 中 输入 站 点 的 名 称 ， 如 
“mysite” ， 单 击 [ 杷 下 按钮， 如 图 2-37 所 示 。 


在 右 侧 输入 相应 的 站 点 信息 ， 然 后 单 击 [ 本 外 ] 按 


5 PER 
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SAD | 二 和 四] [id mb] [LE w 
图 2-38 输入 站 点 的 相应 信息 


步 又 4 单 击 [ 王 加 按钮 ，LeapFTP 开始 连接 FTP 服务器。 在 左 侧 列表 框 中 选择 
index.html， 按 住 鼠 标 左 键 不 放 ， 将 其 拖 入 到 右边 的 列表 框 中 ， 如 图 2-39 所 示 。 
步骤 5 释放 鼠标 , 开始 上 传 文件 。 稍 等 片刻 ， 即 可 发 现 所 选 文 件 已 经 上 传 到 空间 中 ， 


SS 


hn ET ER] I 
图 2-39 上 传 文件 图 2-40 上 传 成 功 
2.5 典型 实例 平台 


本 章 所 讲 的 内 容 都 是 在 为 创建 网 站 做 准备 ， 如 在 Dreamweaver CS3 中 建立 站 点 以 及 管 
理 站 点 。 下 面 以 新 建 名 为 myhome 的 站 点 为 例 ， 创 建 一 个 网 站 平台 。 具 体操 作 如 下 : 
步骤 1 选择 PHPnow-1.4.5-22 并 右 击 在 弹出 的 快捷 菜单 中 选择 “ 重 命名 ”命令 ， 将 
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文件 夹 命名 为 PHPnow。 

步 又 2 双击 PHPnow 文件 夹 将 其 打开 ， 在 其 中 双击 Init.cmd 文件 ， 打 开 “ 初 始 化 
PHPnow 1.4.5” 窗 口 , 系统 将 自动 安装 .在 安装 过 程 中 会 提示 用 户 设置 MySQL 
数据 库 密码 ， 如 图 2-41 所 示 。 

步 驿 3 输入 密码 后 按 Enter 键 ， 然 后 按 任意 键 完成 安装 。 此 时 将 自动 打开 一 个 测试 
网 页 ， 然后 在 “D:\PHPnow\htdocs” 目 录 下 创建 一 个 名 为 Myhome 的 文件 夹 。 

步 又 4 进入 Dreamweaver CS3 工作 界面 ， 选 择 【 窗 口 】/【 文 件 】 命 令 打 开 “ 文 件 ” 
面板 ， 如 图 2-42 所 示 。 


于 FTP a Rns 服 
加 -局 桌面 项 目 
< > 
® EE. 
图 2-41 安装 运行 环境 图 2-42 “文件 ”面板 


步骤 3 在 “文件 ”面板 的 “站 点 ”下 拉 列 表 框 中 选择 “管理 站 点 ”选项 ， 如 图 2-43 
所 示 。 弹 出 “管理 站 点 ”对 话 框 ， 单 击 [高 建 中 .… | 按钮 ， 如 图 2-44 所 示 。 
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2-43 选择 “管理 站 点 ”选项 图 2-44 “管理 站 点 ”对 话 框 


步骤 6 在 弹出 菜单 中 选择 “站 点 ”命令 ， 弹 出 “未 命名 站 点 1 的 站 点 定义 为 ”对 话 
框 ， 在 “您 打算 为 您 的 站 点 起 什么 名 字 ? ”文本 框 中 输入 所 需 的 站 点 名 称 ， 
如 “myhome”。 


步骤 7 在 “您 的 站 点 的 HTTP 地 址 (URL ) 是 什么 ”文本 框 中 输入 网 站 地 址 ， 如 
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http://127.0.0.1/myhome”, 单 击 EE3@ 习 按钮 。 


步 又 8 在 弹出 的 对 话 框 中 选中 日 涯 我 失 合用 服 条 器 接 未 代 单 选 按钮 ， 在 “ 哪 种 服务 
器 技术 ” 下 选项 ， pe 

步骤 9 hornet pd 地 可是 这 合计 站 入) 在 单 选 按钮 ， 单 

十“ 你 将 把 文件 存储 在 计算 机 上 的 什么 位 置 ? 文本 框 后 的 a 按钮， 

选择 建立 的 myhome 路径 ， 单 击 EEEE@ 习 按钮 ， 如 图 2-45 所 示 。 

步骤 10 在 弹出 的 对 话 框 中 的 “您 应 该 使 用 什么 URL 来 浏览 站 点 的 根 目录 ? ”文本 
框 中 输入 “http:/127.0.0.1/myhome /”， 然 后 单 击 [王权 困 ] 按 钮 。 稍 等 片刻 ， 
将 弹出 对 话 框 提示 用 户 测试 成 功 。 单 击 [ 双 按钮 ， 再 单 击 EEE 相 按钮 ， 如 
图 2-46 所 示 。 
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图 2-45 选择 文件 放置 位 置 图 2-46 输入 测试 浏览 站 点 的 根 目录 
步 又 11 在 弹出 的 对 话 框 中 选中 四 竺 7 不 下 用 伦 回 和 取 卫 一面 | 单 选 按钮 ， 单 击 EEE@ 习 按钮 ， 
弹出 “总 结 ” 对 话 框 ， 单 击 [三 四] 按钮。 
步 又 12 返回 到 “管理 站 点 ”对 话 框 ， 单 击 [到 加] 按钮 ， 即 可 看 到 定义 的 站 点 ， 如 


图 2-47 所 示 。 
jv 文件 本 
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| C e ~ 本 
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完成 创建 
学 会 了 。 py 个 
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图 2-47 建立 好 的 站 点 
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2.6 常见 问题 解答 


人 A 魔法 师 ， 为 什么 在 创建 站 点 时 ， 选 择 动 态 服 务 器 技术 要 选 “PHP+HMySQL”， 选 择 
其 他 项 不 可 以 吗 ? 


£ 可 以 在 下 拉 列 表 中 选择 任意 一 种 ， 在 此 选择 “PHP+MySQL” 动 态 技术 是 因为 在 后 
面 的 章节 中 我 们 将 用 这 种 动态 技术 开发 网 站 的 一 些 功 能 。 PHP 是 一 种 简单 的 动态 交 
互 语言 服务 技术 ， 经 过 多 年 的 发 展 已 日 趋 成 熟 ， 广 泛 应 用 于 各 类 网 站 ， 大 有 逐步 蔡 
代 ASP 动态 交互 技术 的 趋势 。 


外 二 让 由 上 中 请 了 一 个 免费 的 空间 ， 怎么 过 一 时 间 就 没有 了 哆 ? 
A 
LE 


8 因为 现在 注册 免费 空间 的 用 户 很 多 ， 很 多 免费 空间 供应 商 为 了 缓解 空间 压力 ， 规 定 
用 户 在 间隔 一 段 时 间 后 ， 必 须 登 录 并 管理 该 空间 ， 不 然 系统 将 自动 认为 该 空间 是 已 
废弃 的 空间 而 将 其 删除 。 


2.7 过 关 练 习 


(1) 配置 好 运行 环境 ， 新 建 一 个 名 为 star 的 站 点 。 
(2) 启动 下 浏览 器 ， 在 地 址 栏 中 输入 “http://www.987.cn/”， 在 打开 的 “ 九 八 七 网 
络 ”网 页 中 注册 一 个 域名 并 申请 一 个 空间 ， 如 图 2-48 所 示 。 
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图 2-48 最 终 效 果 
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Dreamweaver CS3s 的 工作 界面 
页 面 的 基本 操作 
设置 页 面 属性 


典型 实例 一 一 “诗歌 “页 面 的 
Se 


小 魔女 : 


魔法 师 : 


小 魔女 : 


魔法 师 : 


小 魔女 : 
魔法 师 : 


网" 多 煤 体 教学 演示 : 20 分 名 


魔法 师 ， 建 立 好 了 站 点 ， 是 不 
是 要 开始 学 习 页 面 的 制作 了 ? 
不 要 着 急 ， 有 一 句 话 叫 做 “ 魔 
思 不 误 兢 柴 工 ”, 在 制作 网 页 之 
前 ,我 们 兴 须 先 认 识 和 了 解 网 
站 的 制作 工具 。 

在 前 面 一 章 , 不 是 讲 了 用 记事 
本 可 以 做 网 页 吗 ? 

是 的 ,但 是 记事 本 制作 网 页 的 
难度 较 高 ， 而 且 速 度 慢 。 我们 
兴 须 利用 网 站 制作 工具 对 网 页 
进行 开发 。 

都 有 哪些 网 站 制作 工具 呢 ? 

有 很 多 ! 但 是 本 章 主要 是 介绍 
Dreamweaver CS3 及 其 基本 
操作 。 


a 新 手 学 做 网 站 


3.1 Dreamweaver CS3 的 工作 界面 


目前 为 止 , Dreamweaver CS3 是 最 新 版 本 ,与 老 版 本 相 比 ， 界面 和 功能 有 大 幅度 改变 ， 
启动 Dreamweaver CS3 后 将 显示 一 个 起 始 页 ， 在 “新 建 ” 栏 中 单 击 任 意 一 个 超 链接 ， 将 新 
建 一 个 页 面 ， 打 开 网 页 编辑 窗口 ， 如 图 3-1 所 示 。 


相 t 无 。 加 ”并 雹 Cle 了 生 才 王 
学 人 | 网 A 于 仁 加 大 小 元 [| ;3=2 日 


3-1 网 页 编辑 窗口 


3.1.1 插入 栏 


插入 栏 位 于 菜单 栏 的 下 方 ， 插 入 栏 主要 用 于 在 网 页 中 插入 各 种 网 页 元 素 ， 在 该 栏 中 主 
要 包含 “常用 ”、“ 布 局 ”、“ 表 单 ”、“ 数 据 ”、“Spry”、“ 文 本 ”和 “收藏 严 ”7 
个 选项 卡 ， 单 击 相应 的 选项 卡 ， 将 出 现 相应 的 功能 按钮 。 下 面 将 介绍 常用 的 几 个 选项 卡 的 
功能 。 


1，“ 常 用 ”选项 卡 


“常用 ”选项 卡 主要 用 于 在 网 页 中 添加 超 链 接 、 图 像 和 日 期 等 常见 元 素 ， 如 图 3-2 所 
示 ， 其 中 的 某 些 按钮 也 出 现在 其 他 选项 卡 中 ， 如 “表格 ”按钮 四 同时 也 出 现在 “布局 ” 选 
项 卡 中 。 


好 / 第 3 章 ， 轻 松 操作 网 站 制作 工具 


垃 


电子 邮件 链接 ”表格 。 “图像 日 期 注释 文件 头 脚本 ”标签 选择 器 


mw 搬 和 党 用 | 布局 | 寿 单 | 数据 | sh 
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媒体 
超 链 接 锚 记 插入 Div 标 签 ` 服务 器 端 包括 


模板 
图 3-2 “常用 ”选项 卡 
2. “布局 ”选项 卡 
“布局 ”选项 卡 主要 用 于 进行 页 面 布 局 ， 可 添加 表格 、 层 、 框 架 以 及 窗口 模式 的 切换 
等 操作 ， 如 图 3-3 所 示 。 spry 可 折 革 面板 


绘制 层 “Spry 面板 框架 ”绘制 布局 单元 格 


Div 标签 在 上 面 插入 行 IFFORME 绘制 布局 表格 


图 3-3 “布局 ”选项 卡 


3. “表单 ” 选 项 卡 
“表单 ”选项 卡 主要 用 于 插入 表单 对 象 ， 如 文本 字段 、 复 选 框 和 单 选 按钮 等 ， 如 图 3-4 
所 示 。 文本 区 域 列表 /菜单 


Pt 


了 隐藏 域 复 选 框 单 选 按钮 组 。 文件 域 。 标签 验证 文本 域 。 验证 选择 


图 3-4 “表单 ”选项 卡 


4 “文本 "选项 卡 
“文本 ”选项 卡 主要 用 于 添加 特殊 字符 或 者 对 文本 的 格式 进行 设置 ， 如 图 3-5 所 示 。 


As 法 
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v 括 入 常用 | 机 局 | 表单 | 涩 据 | Spry 文本 收藏 瑟 
BI|S emg tinh hh ol dd dd|ar wc| 


图 3-5 “文本 ”选项 卡 


"Wh 魔法 档案 
右 击 “ 常 用 ”按钮 ， 在 弹出 的 快捷 菜单 中 选择 “显示 菜单 ”命令 ， 即 可 改变 插入 栏 的 显 
示 方式 。 如 果 要 恢复 ， 单 击 插入 栏 右上 角 的 固 旨 按钮 ， 在 弹出 的 快捷 菜单 中 选择 “显示 为 制 表 符 ” 命 


令 即 可 。 

“插入 第 用 布局 | 表单 | 煞 禾 | Spry | 文本 | 收 宋 亚 发 

筷 回 最 | 国 昌国. 咎 -国电 回旋 -所 -| 图- 时 | mi 
3.1.2 文档 工具 栏 


文档 工具 栏 主要 用 于 代码 编辑 和 可 视 化 编辑 ， 该 工具 栏 中 又 包含 转换 编辑 区 视图 模 
式 、 设 置 网 页 标题 、 进 行 标签 验证 以 及 在 浏览 器 中 浏览 网 页 等 ， 如 图 3-6 所 示 。 


转换 视图 设置 标题 文件 管理 刷新 设计 视图 ”可 视 化 助理 
外 二 Eee 一 [网 辑 de ers 


在 浏览 器 中 预览/ 调试 ”视图 选项 
图 3-6 文档 工具 栏 


3.1.3 浮动 面板 组 


浮动 面板 组 是 停靠 在 编辑 窗口 右 侧 的 浮动 面板 的 集合 ， 用 户 可 以 在 浮动 面板 组 里 管理 
站 点 、 管 理 CSS 样式 和 管理 数据 库 等 。 使 用 浮动 面板 组 的 方法 介绍 如 下 : 
党 ”显示 面板 内 容 : 单 击 浮动 面板 名 称 左 侧 的 天 图 标 即 可 显示 该 面板 的 内 容 , 同时 国 
图 标 变 为 国 图 标 ， 再 单 击 国 图 标 则 折 芝 面板， 恢复 原状 ， 如 图 3-7 所 示 。 
| 也 可 通过 选择 窗口 下 相应 
As ks | 示 
RICG1S 人 Hyg| 动 面板 的 元 素 。 | 
地 文件 | 大 个 [ 关 [2 
TO Candi 文 梓 天。 2008-6-18 一 > 
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党 ”移动 浮动 面板 :将 鼠标 指针 移 到 浮动 面板 的 国 图 标 上 ， 当 鼠标 指针 变 为 聊 形 状 时 
进行 拖 动 ， 可 以 将 浮动 面板 移 到 窗口 中 的 任意 位 置 


3.1.4 “属性 ”面板 


“属性 ”面板 通常 用 于 设置 和 查看 所 选 对 象 的 各 种 属性 ， 它 位 于 Dreamweaver CS3 的 
底部 ， 单 击 其 右 下 角 的 忆 按钮 可 打开 其 他 的 设置 项 目 ， 单 击 右 下 角 的 .会 按钮 则 可 进行 还 
原 。 不 同 对 象 其 “属性 ”面板 的 参数 设置 项 目 也 不 同 ， 如 图 3-8 所 示 。 


下 属性 把 
格式 司 被 [ 无 加 C5] Bz 二 生 淄 囊 链 按 [ ob@ 
字体 默认 字体 加 大 小 无 六 器 ] 汪 注 丝 经 ”目标 

Tv 属性 把 

图 你，173K 宽 P18“]】 。 源 文 件 研 市 皇 放 /2496667. jpd@ 口 。 苦 换 v ( 

[ 高 pas 链接 | J9D 缚 可 过 本 OA 
地 图 | ] 。 委 直 边 距 [ | 目标 边框 | ”| 笃 三 三 
民 ] 口 口 包 x 水平 边 距 低 解析 度 源 @) @ 已 。 对 弄 | 默 U 值 国 。 


3-8 “属性 ”面板 


3.1.5 ”状态 栏 


状态 栏 位 于 编辑 区 域 的 下 方 ， 其 中 包括 标签 选择 器 、 选 取 工 具 、 手 形 工具 、 缩 放 工具 、 
“设置 缩放 比率 ”下 拉 列 表 框 、“ 窗 口 大 小 ” 栏 和 “文件 大 小 ” 栏 等 项 目 ， 如 图 3-9 所 示 。 
(ontinstance editable tr> (dy [NWA lo vexervllk/2 
图 3-9 状态 工具 栏 
各 部 分 的 功能 介绍 如 下 : 
党 ”标签 选择 器 : 在 标签 选择 器 中 显示 了 一 些 常用 的 HTML 标签 ,灵活 运用 这 些 标签 
可 以 很 方便 地 选择 编辑 区 域 中 的 某 些 项 目 ， 从 而 提高 工作 效率 。 例 如 需要 选择 表 
格 中 的 某 一 行 ， 使 用 鼠标 指针 定位 到 该 行 中 的 任意 一 个 单元 格 中 ， 然 后 再 单 击 标 
签 选 择 器 中 的 Etz3 标 签 即 可 选取 该 行 ， 如 图 3-10 所 示 。 


ed 
[oa <table> Ct <tdy [一 
Ddy able R 和 
Ess 


图 3-10 选择 行 
选取 工具 J: 单 击 该 工具 ， 和 鼠标 指针 将 变 为 尺 形状 ， 可 以 选择 设计 视图 中 的 各 种 
对 象 。 
手 形 工具 名: 单 击 该 工具 ， 和 鼠标 指针 将 变 为 如 形状 ， 此 时 按 住 鼠 标 左 键 不 放 并 拖 


全 


J 
D2 


六 学 束 会 柑 法 惠 


六 
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动 妃 标 ， 可 以 移动 设计 视图 中 整个 网 页 的 位 置 ， 从 而 方便 查看 原来 未 显示 出 来 的 
部 分 内 容 。 

缩放 工具 @]: 单 击 该 工具 ， 和 鼠标 指针 将 变 为 @@ 形 状 ， 此 时 在 设计 视图 中 单 击 可 以 
放大 设计 视图 中 显示 的 内 容 ; 按 住 【Alt] 键 不 放 ， 鼠 标 指针 将 变 为 尽 形 状 ， 此 时 
在 设计 视图 中 单 击 可 以 缩小 设计 视图 中 显示 的 内 容 ; 按 住 筷 标 左 键 不 放 并 拖 动 ， 
可 在 设计 视图 中 拖 出 一 个 矩形 框 ， 释 放 和 鼠标 ， 此 时 被 矩形 框框 住 的 部 分 将 以 最 大 
化 的 方式 进行 显示 。 

“设置 缩放 比率 ”下 拉 列 表 框 : 用 于 设置 设计 视图 的 缩放 比率 ， 在 其 中 可 以 直接 
输入 需要 的 缩放 比率 数值 或 单 击 右 侧 的 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 一 个 缩 
放 比 率 。 

“窗口 大 小 ” 栏 : 用 于 显示 当前 设置 视图 的 尺寸 大 小 。 

“文件 大 小 ” 栏 : 用 于 显示 当前 网 页 文件 的 大 小 以 及 下 载 时 可 能 需要 的 时 间 。 


3.2 页 面 的 基本 操作 


认识 了 Dreamweaver CS3 的 界面 后 ， 接 着 来 学 习 网 页 的 一 些 基本 的 操作 ， 包 括 新 建 网 
页 、 保 存 网 页 、 打 开 网 页 、 预 览 网 页 和 关闭 网 页 等 操作 ， 下 面 依次 进行 介绍 。 


3.2.1 新建 网 页 


编辑 网 页 文档 ， 首 先是 新 建 网 页 文档 ， 其 具体 操作 如 下 : 

步 又 1 选择 【文件 〗/【 新 建 〗 命 令 ， 弹 出 “新 建文 档 ” 对 话 框 。 

步 又 2 在 左 侧 选 择 “ 空 白 页 ”选项 卡 , 在 “页 面 类 型 > 栏 中 选择 类 型 , 如 选择 “HTML” 
类 别 ， 右 侧 会 显示 布局 的 网 页 样式 ， 如 图 3-11 所 示 。 

步 又 3 在 右 侧 列表 框 中 选择 所 需 创建 的 网 页 样式 后 , 单 击 8 哇 久 | 按钮 即 可 新 建 指 
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te 


ie 
人 


人 


定 的 样式 。 
~ SN 
AS 小 岂 女 ,在 第 2 章 学 习 了 建立 网 站 和 ~ 
管理 网 站 ， 在 “文件 ”浮动 面板 里 ， 哦 ， 我 记 住 了 ， 通 过 
选择 任意 一 个 文件 夹 并 右 击 ， 在 弹出 “文件 ”浮动 面板 还 
的 快捷 菜单 中 选择 “新建” 命令 也 可 可 以 新 建文 件 和 文 
创建 网 页 ， 记 住 了 吗 ? > 件 夹 。 
> > 寺 4 
。 


让 


好 / 第 3 章 ， 轻 松 操作 网 站 制作 工具 


训 二 


| 回迁 择 布 局 # 式 | 


me 


| 


st 


Re cs 文 玫 : CE 


el 


rr Las 


图 3-11 “新 建文 档 ” 对 话 框 


3.2.2 ”打开 已 有 的 网 页 


当 制 作 好 网 页 ， 需 要 再 次 进行 编辑 时 ， 必 须 先 打开 网 页 文档 ， 打 开 网 页 的 具体 操作 
如 下 : 
软 细 1] 选择 【文件 】 /【 打 开 ]】 命 令 ， 弹 出 “打开 ”对 话 框 。 
步骤 2 在 “查找 范围 ”下 拉 列 表 框 中 选择 网 页 所 在 的 位 置 ， 选 中 需要 打开 的 网 页 后 
单 击 [CE 开外] 按钮 即 可 打开 此 文件 ， 如 图 3-12 所 示 。 


"oN 


在 第 2 章 学 习 了 建立 网 站 
和 管理 网 站 , 在 “文件 ”学 

动 面板 里 , 双 # 轴 If 的。 | 
mr, IR 
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图 3-12 打开 网 页 


3.2.3 保存 网 页 
当 文件 编辑 完成 后 ， 就 要 将 其 保存 ， 在 保存 文档 时 ， 不 要 在 文件 名 和 文件 夹 名 中 使 用 


As 法 
2 新 手 学 做 网 站 


汉字 ， 也 不 要 使 用 特殊 符号 或 空格 ， 即 便 是 不 需要 放 到 远程 服务 器 上 的 文件 名 ， 也 不 能 使 
标点 符号 和 特殊 符号 ， 否 则 在 上 传 文件 时 会 导致 服务 器 与 文件 的 链接 中 断 。 保 存 网 页 的 
方法 主要 有 直接 保存 和 另存 文档 两 种 。 


1.， 直接 保存 


直接 保存 可 通过 单 击 “ 标 准 ” 工 具 栏 上 的 七 按 钮 ， 或 是 选择 【文件 】/【【 保 存 】 命 令 
来 实现 。 直 接 保 存 文档 有 以 下 两 种 情况 : 
党 ” 若 要 保存 的 文档 已 经 存在 ， 当 单 击 四 按钮 或 选择 【文件 】/【 保 存 】 命 令 时 将 直 
接 保 存在 文档 原来 的 位 置 。 
只 ”车 文 档 为 新 建 的 文档 ， 则 保存 时 会 弹出 如 图 3-13 所 示 的 “另存 为 ”对 话 框 ,选择 
保存 的 位 置 ， 然 后 输入 文件 名 ， 单 击 [CE 名] 按钮 即 可 。 


二 Ww 魔法 档案 
如 果 同时 打开 了 多 个 网 页 ， 单 击 区 


按钮 保存 当前 页 ， 单 击 风 按钮 保存 所 有 网 页 
但 要 输入 的 文件 名 必须 是 英文 或 字母 、 数 字 组 
合 ， 而 且 文 件 名 不 能 以 数字 开头 。 


me Bd | - 魔力 测试 
| 创建 一 个 完全 空白 的 页 面 ， 然 后 以 
| “index.htm” 的 名 字 将 其 保存 。 
口 重播 Unode 天 各 (ov 


汛 


图 3-13 “另存 为 ”对 话 框 


2.， 另存 文档 


如 果 对 已 经 打开 的 网 页 文档 进行 编辑 后 ， 想 以 另外 的 名 称 保存 或 不 想 保 存在 原 位 置 
时 ， 就 需要 对 其 进行 另存 为 操作 ， 其 方法 为 : 选择 【文件 】/【 另 存 为 】 命 令 ， 弹 出 “另存 
为 ”对 话 框 ， 选 择 保存 位 置 ， 输 入 文件 名 ， 单 击 [要 名 J] 按钮 即 可 。 


3.3 设置 页 面 属性 
新 建 了 页 面 后 ， 我 们 可 以 直接 双击 站 点 中 的 页 面 文 档 将 其 打开 并 设置 网 页 属性 。 选 择 


【修改 】/【 必 性】 命令， 将 会 弹出 “页 面 属性 ”对 话 框 ， 用 户 根据 需要 在 其 中 进行 属性 设 
置 ， 设 置 完成 后 ， 单 击 “ 页 面 属性 ”对 话 框 中 的 名 按钮 ， 即 可 使 设置 生效 。 


一 学 区 会 谋 法 书 阐 


区 一 


a 4 第 3 章 轻松 操作 网 站 制作 工 具 


3.3.1 外 观 


在 “页 面 属性 ”对 话 框 的 “分 类 ”列表 框 中 选择 “外 观 ” 选 项 ， 其 参数 设置 将 显示 在 
对 话 框 的 右边 。 该 栏 中 各 参数 的 功能 介绍 如 下 : 

党 ”页 面 字体 : 在 该 下 拉 列 表 框 中 可 选择 网 页 中 需要 的 字体 。 

党 ”大 小 : 在 下 拉 列 表 框 中 可 选择 所 需 的 字体 大 小 ， 也 可 在 该 文本 框 中 直接 输入 字体 


的 大 小 。 
人 ”文本 颜色 : 单 去 “颜色 ” 按 名 | 特 打开 如 图 3-14 所 示 的 颜色 列表 ， 从 其 中 可 选择 
需要 的 文本 磊 色 。 


和 


* \ 文本 的 颜色 字体 、 大 小 等 属性 也 可 在 
) “属性 ”面板 中 设置 ， 其 优先 级 别 高 于 
页 面 属 性 ， 也 就 是 说 “属性 ”面板 中 这 
些 设置 和 页 面 属性 不 同时 ， 文 本 显示 的 
HH 由 E 是 “属性 ”面板 中 的 设置 。 多 
图 3-14 颜色 列表 1 
党” 背景 颜色 : 单 击 “颜色 ”按钮 后 |， 从 弹出 的 颜色 列表 中 可 选择 需要 的 页 面 背 景 颜 
色 ， 其 操作 方法 与 文本 闫 色 的 设置 相同 。 
党 ”背景 图 像 : 有 时 单一 的 背景 颜色 不 能 满足 制作 网 页 的 需求 ， 这 时 可 以 为 网 页 添加 
背景 图 像 ， 单 击 “ 背 景 图 像 ”文本 框 后 的 [LE ] 按 钮 ， 将 弹出 如 图 3-15 所 示 
的 “选择 图 像 源 文件 ”对 话 框 。 在 “查找 范围 ”下 拉 列 表 中 选择 所 需 图 片 的 位 置 ， 
然后 在 文件 列表 中 选择 需要 的 图 片 ， 这 里 选择 “mmijpg” 文 件 。 单 击 开 瑞 定 ] 按 
钮 ， 系统 将 弹出 如 图 3-16 所 示 的 对 话 框 提示 保存 图 片 到 站 点 中 ( 如 果 该 图 片 文件 
原本 就 在 站 点 根 目录 下 则 不 会 弹出 此 对 话 框 ) 。 单 击 己 是 加 按钮 ， 弹 出 “复制 
文件 为 ”对 话 框 ， 如 图 3-17 所 示 ， 在 “保存 在 ”下 拉 列 表 框 中 选择 文件 保存 位 置 ， 
单 击 [全 加 | 按钮 将 该 图 片 文件 复制 到 站 点 根 目录 下 ， 完 成 背景 图 像 的 添加 。 
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选择 加 你 演 文件 


Adobe Dreanveaver C53 网 


2 于 


您 的 根 文件 夹 是 
D: \PHPnow\htdocs\mysite\ 


您 厅 意 将 这 文件 复制 可 | 根 文件 严 中 中 ? 
图 3-15 “选择 图 像 源 文件 ”对 话 框 图 3-16 “是 否 复制 文件 ”对 话 框 
一 学 就 会 离 活 忆 -1 
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复制 文件 为 区 J 
A 魔法 档案 
网 站 中 涉及 的 任何 素材 ， 如 图 


片 、 声 音 、 动 画 和 视频 文件 ， 都 得 放 在 站 
点 文件 夹 中 进行 管理 ， 如 果 文件 未 放 到 站 
点 文件 夹 下 ， 可 能 会 导致 网 页 显示 不 正常 。 


文件 名 加: |beijind jpg 
保存 类 型 [)， 所 有 文件 (x *) 


图 3-17 “复制 文件 为 ”对 话 框 
左边 距 : 在 该 文本 框 中 输入 数值 可 设置 文本 与 浏览 器 左边 界 的 距离 。 
右边 距 : 在 该 文本 框 中 输入 数值 可 设置 文本 与 浏览 器 右边 界 的 距离 。 
上 边 距 : 在 该 文本 框 中 输入 数值 可 设置 文本 与 浏览 器 上 边界 的 距离 。 
党 ”下 边 距 : 在 该 文本 框 中 输入 数值 可 设置 文本 与 浏览 器 下 边界 的 距离 。 
在 每 个 边 距 设置 的 文本 框 中 输入 数值 后 ， 可 激活 [ES 辣 避 下 拉 列 表 框 ， 可 在 其 中 选择 
单位 ， 如 “像素 px”、“ 点 数 pt”、“ 厘 米 cm” 等 。 


ie 
人 


如 


如 


和 原 力 测试 
| 启动 Dreamweaver CS3， 新 建 一 个 名 为 “xiaomi.html” 的 网 页 ， 试 着 为 其 添加 一 个 漂亮 的 
背景 图 片 。 


3.3.2 ”链接 


链接 是 页 面 中 最 为 重要 的 部 分 ， 在 “页 面 属性 ”对 话 框 的 “分 类 ”列表 框 中 选择 “ 链 
接 ”选项 ， 即 可 在 对 话 框 的 右 侧 对 链接 属性 进行 设置 ， 如 图 3-18 所 示 。 


链接 字体 (L); [5 同 页 面 字体》 
大 小 司 汪 
诈 接 闫 色 LL): 站 去 的 图 像 押 接 @): 站 
已 访问 甸 接 0): 站 | 。 活动 链接 W: 加 | 
下 中 样式 中: | 下 生 有 下 2 各 


图 3-18 设置 “链接 ”属性 
该 栏 中 各 个 参数 功能 介绍 如 下 : 


一 学 殴 会 硕 法 书 里 


zt 时 
a 第 3 章 轻松 操作 网 站 制作 工具 大 法 蔬 


0 


链接 字体 : 在 该 下 拉 列 表 框 中 可 选择 网 页 中 链接 文本 的 字体 ， 单 击 右 侧 的 也 按钮 
或 工 按钮 可 将 链接 文本 设置 为 加 粗 或 儿 体 格式 。 

大 小 : 在 该 下 拉 列 表 框 中 可 选择 链接 文本 的 字体 大 小 ， 也 可 在 该 文本 框 中 直接 输 
入 所 需 字体 大 小 。 

链接 颜色 : 设置 链接 文本 的 颜色 。 

变换 图 像 链接 : 设置 滚动 链接 的 颜色 。 

已 访问 链接 : 设置 访问 后 的 链接 文本 的 颜色 。 

活动 链接 : 设置 正在 访问 的 链接 文本 的 颜色 。 

下 划 线 样式 : 可 在 该 下 拉 列 表 框 中 设置 链接 对 象 的 下 划 线 ， 如 图 3-19 所 示 。 
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J 


ee， 


ea， 
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[有 天 ~ 8 

i VY 厢 力 测试 

生机 有 如 家 | 打开 一 个 有 链接 的 网 页 ,然后 斌 着 设置 
图 3-19 设置 链接 对 象 的 下 划 线 【链接 颜色 ， 字 体 大 小 ， 


3.3.3 ”标题 


在 “页 面 属性 ”对 话 框 中 的 “分 类 ”列表 框 中 选择 “标题 ”选项 ， 其 参数 设置 将 显示 
在 对 话 框 的 右 侧 ， 如 图 3-20 所 示 。 


页 面 属性 


标题 字体 @) ;| 同 页 面 字体 ) 
标题 1() v 
标题 2 @) 

标题 3 G) 

标题 4(d) 


标题 5 G) 
标题 8@) 


加 加 旺旺 虽 虽 


图 3-20 设置 “标题 ”属性 
该 栏 主要 用 于 设置 标题 的 格式 ， 其 功能 分 别 介绍 如 下 
人 ”标题 字体 : 在 该 下 拉 列 表 框 中 可 选择 页 面 标题 的 字体 大 小 ， 也 可 在 其 中 直接 输入 
所 需 字体 大 小 。 
党” 标题 1; 在 该 下 拉 列 表 框 中 可 选择 一 级 标题 的 字体 大 小 ， 也 可 在 其 中 直接 输入 所 
需 字体 大 小 ; 单 击 其 后 的 三 | 按 钮 ， 在 弹出 的 颜色 对 话 框 中 可 设置 其 颜色 


“标题 2 一 标题 6” 中 分 别 用 于 设置 2~6 级 标题 的 字体 大 小 和 颜色 , 其 设置 方法 与 “ 标 
题 1” 的 设置 方法 相同 。 


和 


| 
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3.3.4 ”标题 /编码 


在 “页 面 属性 ”对 话 框 的 “分 类 ”列表 框 中 选择 “标题 /编码 ”选项 ， 其 参数 设置 将 显 
示 在 对 话 框 的 右 侧 ， 如 图 3-21 所 示 。 


标题 [): | 如何 让 你 遇见 我 | 


Xi% 型 om): [nm 10 Trwsitimd 。 国 


编码 @) :| 简体 中 文 (6B2312) 


EEK) 


文件 文件 夷 ; D;\FHPnow\htdocs\nysite\ 
站 点 文件 亚 ; D;\FHPnow\htdocs\mysite\ 


3-21 设置 “标题 /编码 ”属性 
该 栏 中 各 个 参数 功能 介绍 如 下 : 
党 标题 : 可 在 该 文本 框 中 输入 或 修改 网 页 标题 ， 该 标题 将 出 现在 浏览 器 标题 栏 中 。 


党 编码: 设置 页 面 使 用 的 字体 编码 类 型 ， 中 国 大 陆 一 般 为 
编码 。 


ww 篇 


简体 中 文 (GB2312) ” 


3.3.5 ”跟踪 图 像 


在 “页 面 属性 ”对 话 框 的 “分 类 ”列表 框 中 选择 “跟踪 图 像 ”选项 ， 其 参数 设置 将 显 
示 在 对 话 框 右 侧 ， 如 图 3-22 所 示 。 


页 面 属性 


了 中 图 人 C); [Inves/2006113082555. jp 
进 明度 加) [一 
通明 


取消 ”] [ 应用) 


图 3-22 ”设置 “跟踪 图 像 ” 属 性 
该 栏 中 各 个 参数 功能 介绍 如 下 : 


nn 
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学 ”跟踪 图 像 : 指定 用 作 复制 设计 时 的 参考 图 像 。 
党 ”透明度 : 设置 跟踪 图 像 的 透明 程度 ， 可 通过 鼠标 拖 动 滑 块 进行 设置 ， 最 左边 为 完 
全 透明 ， 最 右边 为 完全 不 透明 。 


3.4 典型 实例 一 一 “诗歌 ”页 面 的 设置 
本 章 认识 了 Dreamweaver CS3 的 工作 界面 ， 熟 悉 了 页 面 的 基本 操作 ， 然 后 又 讲解 了 设 


置 页 面 属性 的 方法 ， 典 型 实例 将 围绕 这 些 知识 点 ， 对 单调 的 网 页 进行 美化 ， 美 化 后 的 最 终 
效果 如 图 3-23 所 示 〈 光 盘 : \ 最 终 效果 \ 第 3 章 \ 诗 歌 \shige.htm》 。 


ET e-htal — Wicrosoft Internet Explorer 
文件 中) ”编辑 下 ) 查看 中 收藏 习 工具 帮助 中 


四 请 四- 国 国 的 万 央 丙 tmx 四 合生 回回 级 


地 直 夯 ) | 四 http:/1127.0.0.l/mysitwy shige htal vO Wi @seat 日 


今 启 动 Dreamweaver CS3。 
步 又 2 ”选择 【文件 ] 人 打开] 了 命令, 在 弹出 的 “打开 ”对 话 框 中 找到 名 为 “shige.html” 
(光盘 : \ 素 材 \ 第 3 章 \ shige.htm ) 的 网 页 并 将 其 打开 ， 如 图 3-24 所 示 。 
步骤 3 单 击 “ 属 性 ”面板 中 的 [页 面 属 轿 按钮， 弹出 “页 面 属性 ”对 话 框 。 
步 又 4 在 “页 面 字 体 ” 下 拉 列 表 框 中 选择 “隶书 ”。 


图 3-23 最终 效果 
具体 操作 如 下 : 
步 驿 1] 选择 【开始 】/【 所 有 程序 】/【Adobe】/【Macromedia Dreamweaver CS3】 命 
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ep 
点 也 不 好 看 , 色香 。 公演 全 
国 调 ， 没 有 图 片 。 
i i 
于 个 | 陵 字 件 国 | 大小 无 加 EL 医 本 加 
图 3-24 打开 页 面 
步 又 5 在 “大 小 ”下 拉 列 表 框 中 选择 “18”。 
回电 6 单 击 “ 文 本 颜色 ”后 面 的 三 | 按钮 ， 在 弹出 的 颜色 列表 框 中 选择 “玫瑰 红 ”， 
也 可 直接 在 该 文本 框 中 输入 “#FF33FF”。 
步骤 7 单 击 [0] 按钮 ， 在 背景 图 像 中 选择 “lihuajpg” (光盘 : \ 素 材 \ 第 3 章 \ 
lihuajpg) 图 片 文件 ， 如 图 3-25 所 示 为 设置 外 观 后 的 对 话 框 。 
页 面 属 性 
页 面 字体 @): , 过 
大 小 : |18 辣 | 像素 ex) 辣 
文本 颜色 (1); 加 | [可 733F7 
背 晤 颜色 @B): 中 
青 景 图 你 加 ) : linages/lihus jpg 
a 图 3-25 “外观 设置 
步 又 8 单 击 “ 分 类 ”列表 框 中 的 “链接 ” 选项。 
步 又 9 ”在 “链接 字体 ”下 拉 列 表 框 中 选择 “黑体 ”选项 ， 单 击 国 按 钮 使 字体 呈 粗 体 
显示 。 
步 又 10 在 “大 小 ”下 拉 列 表 框 中 选择 “16”。 
步骤 11 单 击 链 接 颜 色 后 面 的 三 | 按钮 ， 在 弹出 的 颜色 列表 框 中 选择 深 “ 红 色 ”， 也 可 
A 4 ， 


一 学 丽 会 属 活 
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并 2 


直接 在 该 文本 框 中 输入 “#FF0000”， 设 置 链接 后 的 对 话 框 如 图 3-26 所 示 。 


魔法 师 ， 我 这 样 
设置 了 ， 链 接 变 
得 十 分 的 醒目 。. 


“0 


3-26 设置 “链接 ”属性 
步骤 12 单 击 “ 分 类 ”列表 框 中 的 “标题 ”选项 。 
步骤 13 在 “标题 字体 ”下 拉 列 表 框 中 选择 “隶书 ”选项 。 
步 又 14 在 “标题 1” 下 拉 列 表 框 中 选择 “24”， 单 击 后 面 的 回 按钮 ， 在 弹出 的 颜色 
列表 框 中 选择 “红色 ”， 也 可 直接 在 该 文本 框 中 输入 “#FF00FF”， 如 图 3-27 
所 示 。 


Snr 
到 国 到 [本 


EE E33 ET- TY 
图 3-27 设置 标题 属性 
步 桑 15 单 击 纪 本 按钮 返回 页 面 可 查看 设置 的 属性 ， 最 终 效果 如 图 3-23 所 示 。 


3.5 常见 问题 解答 


外 谋 汪 师 ， 翅 在 设 于 网 页 的 属性 时 ， 想 将 字体 设置 为 “隶书 ”， 但 在 “字体 ”下 所 列 
表 中 没有 来 书 这 各 字体， 是 不 是 我 的 电脑 了 没有 安装 这 种 字体 ? 


S 
hb， 这 种 字体 是 系统 自 带 的 字体 ， 一 般 的 操作 系统 都 有 的 ， 如 果 用 户 在 Dreamweaver 
CS3 中 设置 字体 时 没有 找到 需要 的 字体 ， 可 在 “字体 ”下 拉 列 表 中 选择 “编辑 字体 
列表 ”选项 ， 在 弹出 的 “编辑 字体 列表 ”对 话 框 中 右边 的 “可 用 字体 ”列表 框 中 ， 


4 | 


/ 
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选择 需要 的 字体 ， 这 里 选择 “隶书 ”， 单 击 加 按钮 将 其 添加 到 左边 的 列表 中 ， 单 击 
记 枉 _] 按 钮 ， 即 可 在 “字体 ”下 拉 列 表 中 选择 需要 的 字体 。 


候 : 许 二 岳 ， 翅 将 网 页 中 的 字体 设置 为 “方正 肯 著 科 体 ”后 ， 将 文件 振 由 到 小 明 的 电脑 
上 ， 字 体 就 变 成 宋体 了 ， 这 是 怎么 回 事 ? 


£. 方正 静 萎 简体 是 一 款 很 漂亮 但 不 常用 的 字体 ， 当 其 他 用 户 电脑 中 没有 这 种 字体 时 ， 
网 页 中 应 用 该 字体 的 文字 将 以 宋体 显示 ， 因 此 在 设计 网 页 时 ， 建 议 文档 中 的 字体 一 
定 要 选择 系统 自 带 的 字体 ， 如 果 要 用 特殊 的 文字 ， 建 议 将 其 字体 设计 成 图 片 插入 网 
页 中 。 如 何 设计 图 片 ， 将 在 后 面 的 章节 中 讲解 ， 这 里 不 再 歼 述 。 


3.6 过 关 练 习 


(1) 新 建 一 个 空白 网 页 ， 在 其 中 输入 作为 标题 的 文本 ， 设 置 其 页 面 属性 ， 效 果 如 
图 3-28 所 示 。 

提示 : 新 建 空白 页 面 后 ， 选 择 所 需 输 入 法 输入 文本 “加 油 ， 中 国 ! ”， 在 “页 面 属 性 ” 
对 话 框 中 将 页 面 文字 字体 设置 为 隶书 ， 大 小 设置 为 36， 文 本 颜色 设置 为 好 F0000， 背 景 颜 
色 设 置 为 #99FF66。 

(2) 通过 “页 面 属性 ”对 话 框 ， 设 置 页 面 广 本， 参考 效果 如 图 3-29 所 示 。 

提示 : 新 建 空白 页 面 后 ， 选 择 所 需 输入 法 输入 文本 ， 在 “页 面 属性 ”对 话 框 中 选择 标 


题 ， 进 行 设置 
往事 涌 上 心头 
往事 涌 上 心头 

加 加 油 ， 中 国 ! 往事 涌 上 心头 

图 3-28 设置 后 的 标题 图 3-29 参考 效果 
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网 页 的 造型 设计 师 一 一 CSS 样式 


由 多 媒体 教学 演示 : 34 分 名 


小 魔女 : 认识 了 网 页 的 制作 工具 ， 学 习 
了 如 何 设置 页 面 ， 接 下 来 是 不 
什么 是 CSS 样式 是 开始 学 习 制 作 网 页 了 
创建 CSS 样式 魔法 师 : 别 着 急 ， 在 制作 网 页 之 前 ,一 
管理 CSS 样式 定 要 明白 CSs 样式 是 怎么 一 回 
应 用 Css 样式 事 。 因 为 它 是 贯穿 网 页 制作 过 
整理 CSS 样式 如 最 初 的 布局 、 字 
二 全 体格 式 等 ， 都 要 涉及 到 它 。 
| 小 魔女 : 那 前 面 所 讲 到 的 背景 设置 是 不 
是 也 属于 CSS 样式 的 范畴 ? 
魔法 师 : 小 魔女 ,你 对 网 页 制作 还 真有 
天 份 ， 的 确 是 这 样 。 网 页 背景 
设置 也 属于 CSS 样式 范畴 ， 只 
不 过 它 属 于 特殊 的 CSS 样式 。 
小 魔女 : 那 我 们 一 起 去 学 习 它 吧 ! 
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4.1 什么 是 CSS 样式 


CSS 样式 又 称 层 倒 样式 表 ， 是 Cascading Style Sheets 的 缩写 。 它 是 网 页 中 最 重要 的 工 
具 之 一 ， 控 制 着 网 页 中 所 有 内 容 的 格式 。 

CSS 样式 经 过 漫长 的 发 展 ， 逐 渐 成 熟 , 浏览 器 技术 的 发 展 也 间接 让 CSS 样式 成 为 网 页 
的 造型 设计 师 ， 浏 览 器 对 它 的 支持 越 来 越 多 ， 所 以 CSS 样式 的 功能 也 越 来 越 强 大 ， 再 也 不 
是 以 前 只 有 统一 风格 的 样式 表 了 ， 而 是 负责 网 页 的 所 有 格式 。 也 就 是 说 ， 它 的 成 熟 发 展 ， 
彻底 让 网 页 的 内 容 和 格式 分 开 ，HTML 代码 逐渐 明朗 ， 网 页 执行 的 速度 越 来 越 快 ， 让 越 来 
越 多 的 终端 能 够 打开 网 页 ， 如 手机 、 数 字 电 视 等 。 


】 ”魔法 档案 
CSS 样式 可 以 应 用 于 同一 个 页 面 的 多 个 对 象 ， 也 可 以 应 用 于 其 他 网 页 的 多 个 对 象 ， 另 外 ， 
如 果 修 改 了 CSS 样式 ， 则 应 用 了 该 CSS 样式 的 所 有 对 象 的 效果 将 会 自动 更 新 。 


4.1.1 CSS 样式 的 定义 方式 


CSS 样式 有 多 种 定义 方式 ， 主 要 包括 类 CSS 样式 、 标 签 CSS 样式 、 伪 类 CSS 样式 。 
定义 的 方法 分 别 介绍 如 下 : 

党 类 CSS 样式: 可 以 对 任何 标签 进行 样式 定义 ， 是 较 常 用 的 定义 方式 。 其 显著 特 
征 是 名 称 前 有 “.”， 需 要 手动 对 对 象 应 用 样式 ， 且 只 会 影响 到 应 用 了 该 样式 的 对 
象 ， 如 图 4-1 所 示 。 

党 ”标签 CSS 样式 : 可 以 对 特定 标签 进行 样式 定义 。 其 显著 特征 是 该 类 样式 会 自动 
为 该 标签 的 所 有 对 象 应 用 样式 。 如 对 “<font>” 标 签 进行 标签 CSS 样式 定义 ， 则 
所 有 在 “<font>” 与 “</font>” 标 签 间 的 文本 会 自动 应 用 该 样式 的 效果 ， 如 图 4-2 
所 示 。 


图 4-1 类 CSS 样式 图 4-2 标签 CSS 样式 


党” 伪 类 CSS 样式 : 实际 是 对 超 链接 各 状态 的 显示 效果 进行 样式 定义 。 其 显著 特征 
是 该 类 样式 会 自动 为 创建 了 超 链接 的 所 有 对 象 应 用 样式 ， 如 图 4-3 所 示 。 


一 学 丈 会 硕 尖 有 里 


Er (ey 
人 伪 类 Css 样式 只 允 超 链接 起 4 
a 作用 ， 未 创建 超 链接 的 对 象 ， 

> 不 受 样 式 表 的 影响。 


4 


4 


4-3 伪 类 CSS 样式 


4.1.2 CSS 样式 的 保存 方式 


CSS 样式 定义 的 所 有 格式 可 以 保存 到 网 页 文件 内 部 ， 也 可 以 以 单独 的 文件 〈.css) 进 
行 保存 。 一 般 来 说 ， 一 个 网 页 涉及 的 格式 保存 在 网 页 文件 的 内 部 ， 多 个 网 页 涉及 的 格式 ， 
以 单独 的 样式 保存 在 外 部 ， 供 多 个 网 页 调用 。 其 特点 分 别 介绍 如 下 : 
党 ”保存 在 网 页 内 部 : 该 方式 将 样式 信息 保存 在 当前 网 页 “<head>” 与 “</head>” 标 
签 之 间 。 其 缺点 是 只 有 当前 网 页 中 的 对 象 才能 应 用 相应 的 样式 ， 即 只 对 当前 网 页 
有 效 ， 如 图 4-4 所 示 。 

党 ”保存 在 网 页 外 部 : 该 方式 将 样式 信息 保存 在 一 个 独立 的 样式 表 文件 中 。 其 优点 是 
将 该 样式 表 文件 链接 到 网 页 中 后 ， 即 可 使 用 其 中 的 样式 ， 也 可 在 多 个 网 页 中 重复 
使 用 ， 如 图 4-5 所 示 。 


[ss 


neta herp-eqaivreencenc-Type 
|<title> 无 际 题 文档 </title> 


style cipee" cext/css"> 


0 ( 
fonc-size: 2dpe; 
oolort #993366; 
backorownd-color: #000000; -de { 

) 

color: #FFOOOO; 


[</style> } 
[</head> 


图 4-4 保存 在 网 页 内 部 图 4-5 保存 在 网 页 外 部 


魔法 档案 

在 多 个 标签 下 CSS 样式 定义 重复 后 ， 其 样式 将 以 最 近 的 样式 为 准 ， 如 将 <span> 标 签 定义 
字体 为 “15” 号 ， 位 于 <span> 内 部 的 <hl> 标 签 定义 字体 为 “20” 号 ，<hl> 标 签 的 内 容 将 以 <hl> 定 义 
的 CSS 样式 为 准 。 


~ dA 
本 一 一 全 人 合 


>) RD 在 同一 个 网 页 中 既 可 以 有 内 部 
| 用 内 部 CSS 样式 和 外 部 样式 Css 样式 ,也 可 以 有 外 部 CSS 样 


吗 ? 如 果 内 部 CSS WBE 式 ， 当 出 现 这 种 情况 时 ， 会 优先 
部 样式 有 同名 样式 怎么 办 ? 使 用 内 部 Css 样式 定义 的 效果 。 


2 1 
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4.2 创建 CSS 样式 


在 Dreamweaver 中 制作 网 页 ， 利 用 CSS 样式 面板 ， 可 达到 事半功倍 的 效果 。 下 面 先 介 
绍 样式 面板 ， 再 介绍 定义 CSS 样式 规则 的 方法 。 


4.2.1 认识 “CSS 样式 ”面板 


“CSS 样式 ”面板 位 于 操作 界面 的 右 侧 ， 如 果 未 显示 ， 可 通过 选择 【窗口 ]/【CSS 样 
式 】 命令 将 其 显示 出 来 ， 如 图 4-6 所 示 。 


和 [5 
“css 生生 
| 全 部 | 正在 
所 有 规则 

CSS 样式 


“. ae” 的 尾 性 
国有 和 新 建 CSS 样式 


color 


涝 加 属性 链接 附加 样式 | 编辑 CSS 样式 


汪 hm 十 十 CSS 样式 二 Az4[4 外 及 可 
图 4-6 “CSS 样式” 面板 


CSS 属性 


4.2.2 新 建 CSS 规则 
新 建 CSS 样式 十 分 简单 ， 单 击 “CSS 样式 ”面板 中 的 “新 建 CSS 样式 ”按钮 互 ， 


将 会 弹出 “新 建 CSS 规则 ”对 话 框 ， 用 户 可 在 此 对 话 框 中 建立 需要 的 样式 类 型 ， 如 图 4-7 
所 示 。 
新 建 C55 规则 
选择 器 类 型 : @) 类 应 用 于 任何 标签) C) 
〇 标签 重新 定义 特定 标签 的 外 观 ) (I) 
侣 高 级 ( ID、 伪 类 选择 器 等 ) (A) 
名 称 : | 
4-7 “新 建 CSS 规则 ”对 话 框 
NR 


:时 
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对 话 框 中 各 选项 的 含义 介绍 如 下 : 

他。 GEGRRFENESID] 单 选 按 钮 :选中 该 单 选 按钮 可 以 创建 类 CSS 样式 ， 可 在 “名 称 ” 
下 拉 列 表 框 中 输入 类 的 名 称 。 

*% 。 曲 际 定夺 新 定义 酝 定 标 委 多 下 观 ) 如 j 单 选 按钮 :选中 该 单 选 按钮 ， 可 以 创建 标签 CSS 样式 。 
当选 中 该 单 选 按钮 后 ，“ 名 称 ” 下 拉 列 表 框 将 变 为 “标签 ”下 拉 列 表 框 ， 并 可 在 
其 中 选择 所 需 的 标签 。 

汉 日 碳 下 (二 人 尖 渤 皖 晓 等 】 网 单 选 按钮 : 选中 该 单 选 按钮 ， 可 以 创建 ID CSS 样式 或 伪 
类 CSS 样式 ， 此 时 由 原来 的 “名 称 ” 下 拉 列 表 框 变 为 “选择 器 ”下 拉 列 表 框 ， 可 
在 该 下 拉 列 表 框 中 选择 需要 使 用 的 伪 类 。 

ET 单 选 按钮 :选中 该 单 选 按钮 可 以 新 建 一 个 外 部 CSS 样 
式 文件 ,并 将 CSS 样式 信息 写 入 该 文件 ; 如 果 在 当前 页 面 中 已 经 链接 有 外 部 CSS 
样式 文件 ， 可 以 在 该 下 拉 列 表 框 中 选择 该 CSS 文件 ， 这 样 新 创建 的 CSS 样式 信 
息 将 写 入 该 文件 。 

作曲 机 五 绽 往 单 选 按钮 : 将 CSS 样式 信息 写 入 到 当前 网 页 文件 中 。 

下 面 以 新 建 一 个 仅 对 该 文档 有 效 的 CSS 样式 为 例 ， 新 建 一 个 CSS 样式 ， 具 体操 作 如 


步 又 1 选择 【窗口 〗/【CSS 样式 】〗 命 令 ， 在 浮动 面板 组 中 打开 “CSS 样式 ”面板 ， 
单 击 “CSS 样式 ”面板 底部 的 如 按钮 ， 如 图 4-8 所 示 。 

步 又 2 弹出 “新 建 CSS 规 则 ”对 话 框 ,在 “选择 器 类 型 " 栏 中 选中 GE 和 EX 的 5 
单 选 按钮 ， 在 “名 称 ” 下 拉 列 表 框 中 输入 样式 名 称 ， 如 “big”。 

步 又 3 在 “定义 在 ” 栏 中 选中 人 @ 镜 导 肖 六 稳 单 选 按钮 ， 并 单 击 斑 确 和 按钮 ， 如 图 4-9 


所 示 。 


“head” 的 尾 性 高 级 ( ID、 伪 类 选择 器 等 (A) 


font-si 1 ea 
onstyle |italie 4 bid 区 和 输入 标签 
font-weight 400 
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图 4-8 “CSS 样式 ”面板 图 4-9 “新 建 CSS 规则 ”对 话 框 
和 步骤 4 弹出 CSS 规则 定义 的 对 话 框 ， 在 “分 类 ”列表 中 选择 要 设置 属性 的 类 别 ， 如 


选择 “类 型 ”选项 ， 在 右 侧 进行 具体 属性 的 设置 ， 如 设置 颜色 为 “#FF0000” 
(红色 ) ， 设 置 完成 后 ， 单 击 忆 按钮 ， 如 图 4-10 所 示 。 
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图 4-10 设置 样式 
和 步 又 5 返回 到 “CSS 样式 ”面板 中 ， 查 看 设置 后 的 信息 。 


魔法 档案 
除了 上 面 的 方法 可 以 新 建 CSS 样式 以 外 ， 还 可 以 通过 在 页 面 空白 处 右 击 ， 在 弹出 的 快捷 
菜单 中 选择 【CSS 样式 】/【 新 建 】 命 令 ， 弹 出 “新 建 CSS 样式 ”对 话 框 ， 在 其 中 进行 样式 设置 。 


魔法 师 ,用 类 CSs 定义 格式 和 
标签 定义 格式 , 有 区 别 吗 ? 在 
实际 应 用 中 , 用 哪 种 定义 格式 


本 比较 好 ? 
请 > 4 4 
4.2.3 定义 CSS 规则 


在 “CSS 规则 定义 ”对 话 框 中 ， 用 户 可 在 “分 类 ”列表 框 中 看 到 “类 型 ”、“ 背 景 ”、 
“区 块 ”、“ 方 框 ”、“ 边 框 ”、“ 列 表 ”、“ 定 位 ”和 “扩展 ”选项 ， 下 面 分 别 讲解 。 


1， 类 型 


在 “CSS 规则 定义 ”对 话 框 的 “分 类 ”列表 框 中 选择 “类 型 ”选项 ， 如 图 4-11 所 示 ， 
在 其 中 可 对 文本 的 样式 进行 设置 。 


a 人、 和 
小 魔女 ， 两 者 可 以 达到 相同 

的 目的 ， 在 应 用 时 可 根据 自 
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4-11 定义 类 型 


其 中 各 个 选项 的 功能 介绍 如 下 : 

“字体 ”下 拉 列 表 框 : 用 于 设置 文本 的 字体 。 

“大 小 ”下 拉 列 表 框 : 用 于 设置 文本 的 大 小 。 

“样式 ”下 拉 列 表 框 : 用 于 设置 文本 的 特殊 格式 ， 如 “斜体 ”、“ 偏 针 体 ”等 。 

“ 行 高 ”下 拉 列 表 框 : 用 于 设置 文本 行 与 行 之 间 的 距离 ， 可 直接 输入 行 高 值 。 

“修饰 ” 栏 : 用 于 设置 文本 的 修饰 效果 ， 如 上 划 线 、 下 划 线 等 。 

“粗细 ”下 拉 列 表 框 : 用 于 设置 文本 的 粗细 程度 ， 如 “ 粗 体 ”， 也 可 直接 输入 粗 

细 值 。 

“ 变 体 ” 下 拉 列 表 框 : 用 于 设置 文本 的 变形 方式 ， 如 “小 型 大 写字 母 ”等 。 

邮 ”“ 大 小 写 ” 下 拉 列 表 框 : 用 于 设置 英文 文本 的 大 小 写 形式 ， 如 “ 首 字母 大 写 ”、 
“大 写 ”、“ 小 写 ” 等 。 

党 “颜色 ” 栏 : 用 于 设置 文本 的 颜色 。 


2.， 背景 


在 “CSS 规则 定义 ”对 话 框 的 “分 类 ”列表 框 中 选择 “背景 ”选项 ， 在 其 中 可 对 背景 
的 样式 进行 设置 ， 如 图 4-12 所 示 。 
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设置 背景 后 的 效果 
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其 中 各 个 选项 的 功能 介绍 如 下 : 

澡 “背景 颜色 ” 栏 : 用 于 设置 背景 颜色 。 

党 “背景 图 像 ” 下 拉 列 表 框 : 用 于 设置 背景 图 像 ， 单 击 [型 按钮 ， 在 弹出 的 对 话 
框 中 可 选择 背景 图 像 ， 也 可 在 该 下 拉 列 表 框 中 直接 输入 背景 图 像 路 径 及 名 称 。 

%* “重复 ”下 拉 列 表 框 : 用 于 设置 背景 图 像 的 重复 方式 ， 有 “不 重复 ”、“ 重 复 ”、 
“水 平 重复 ”和 “ 重 直 重复 ”4 个 选项 。 

党 ”“ 附 件 ” 下 拉 列 表 框 : 用 于 设置 背景 图 像 是 固定 在 原始 位 置 还 是 可 以 滚动 的 。 

% “水 平 位 置 ”下 拉 列 表 框 : 用 于 设置 背景 图 像 的 水 平 位 置 ， 下 拉 列 表 中 包括 “ 左 
对 齐 ”、“ 居 中 ”和 “ 右 对 齐 ”3 个 选项 ， 用 户 也 可 直接 输入 数值 。 

由 “垂直 位 置 ” 下 拉 列 表 框 : 用 于 设置 背景 图 像 的 垂直 位 置 ,下拉 列表 框 中 包括 “ 顶 
部 ”、“ 居 中 ”和 “底部 ”3 个 选项 ， 也 可 直接 输入 数值 ， 如 输入 “40px”。 


A “me 生 


魔法 师 , 在 第 3 章 讲解 了 设置 jk 第 3 章 是 对 整个 网 页 设 
网 页 背景 , 这 里 也 是 讲解 设置 置 背景 ， 通 过 这 节 的 学 习 ， 可 以 
背景 , 这 两 者 有 区 别 吗 ? 它们 对 网 页 中 的 任意 一 块 区 域 设置 
是 怎么 一 回 事 ? yy 背景 ， 包 括 整个 网 页 。 Dy 
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在 “CSS 规则 定义 ”对 话 框 的 “分 类 ”列表 框 中 选择 “区 块 ”选项 ， 在 对 话 框 右 侧 可 
对 区 块 的 样式 进行 设置 ， 如 图 4-13 所 示 为 定义 了 一 些 规 则 后 的 对 话 框 。 
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图 4-13 设置 区 块 


其 中 各 个 选项 的 功能 介绍 如 下 : 
“单词 间距 ”下 拉 列 表 框 : 用 于 设置 单词 之 间 的 间距 ， 只 适用 于 英文 。 
心 “ “字母 间 距 ” 下 拉 列 表 框 : 用 于 设置 字母 之 间 的 间距 。 
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“垂直 对 齐 ” 下 拉 列 表 框 : 用 于 设置 文本 在 垂直 方向 上 的 对 齐 方 式 。 

“文本 对 齐 ” 下 拉 列 表 框 : 用 于 设置 文本 在 水 平方 向 上 的 对 齐 方 式 。 

“文字 缩 进 ”文本 框 : 用 于 设置 文本 首 行 缩 进 的 距离 。 

“空格 ”下 拉 列 表 框 : 用 于 设置 处 理 空格 的 方式 ， 有 “正常 ”、“ 保 留 ” 和 “不 
换行 ”3 个 选项 。 选 择 “ 正 常 ” 选 项 ， 则 会 将 多 个 空格 显示 为 1 个 空格 ; 选择 “ 保 
留 ” 选 项 ， 则 以 文本 本 身 的 格式 显示 空格 和 回 车 ; 选择 “不 换行 ”选项 ， 则 以 文 
本 本 身 的 格式 显示 空格 但 不 显示 回 车 。 

“显示 ”下 拉 列 表 框 : 在 其 中 可 选择 区 块 中 要 显示 的 格式 。 


4. 方 框 


在 “CSS 规则 定义 ”对 话 框 的 “分 类 ”列表 框 中 选择 “ 方 框 ”选项 ， 在 其 中 可 对 方 框 
的 样式 进行 设置 ， 如 图 4-14 所 示 。 
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4-14 ”设置 方 框 


中 各 个 选项 的 功能 介绍 如 下 : 
“ 宽 ” 下 拉 列 表 框 : 设置 方 框 的 宽度 。 
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ee 


“高 ”下 拉 列 表 框 : 设置 方 框 的 高 度 。 

“浮动 ”下 拉 列 表 框 : 设置 方 框 中 文本 的 环绕 方式 。 

“清除 ”下 拉 列 表 框 : 设置 层 不 允许 在 应 用 样式 元 素 的 某 个 侧 边 。 
“填充 ” 栏 : 指定 元 素 内 容 与 元 素 边框 之 间 的 间距 。 
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5. 边框 


在 “CSS 规则 定义 ”对 话 框 的 “分 类 ”列表 框 中 选择 “边框 ”选项 ， 在 其 中 可 对 边框 
的 样式 进行 设置 ， 如 图 4-15 所 示 。 
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设置 后 的 效果 


开始 的 开始 .是 我 们 唱歌 
景 后 的 景 后 是 我 们 在 直 
玉 攻 和 的 你 J 
人 


Cv] CI CR a] 


4-15 ”设置 边框 


其 中 各 个 选项 的 功能 介绍 如 下 : 

党 “样式 ” 栏 : 用 于 设置 元 素 上 、 下 、 左 、 右 的 边框 样式 。 
党 “宽度 ” 栏 : 用 于 设置 元 素 上 、 下 、 左 、 右 的 边框 宽度 。 
党 “颜色 ” 栏 : 用 于 设置 元 素 上 、 下 、 左 、 右 的 边框 颜色 。 


6.， 列表 
在 “CSS 规则 定义 ”对 话 框 的 “分 类 ”列表 框 中 选择 “列表 ”选项 ， 在 其 中 可 对 列表 


的 样式 进行 设置 ， 如 图 4-16 所 示 。 


ul 的 SS 规则 定义 


Bk 
风 目 符号 图 像 (8): |inages/tr099. jpe al 
位 置 ) 


矶 白居易 〈772 一 846) 
已 崔 参 (715-770) 

ps 由 陈 子 帅 《661 一 702) 
用 来 设置 列表 忆 杜 青 (712-770) 


已 李商隐 (813-858) | 


图 4-16 设置 列表 


其 中 各 个 选项 的 功能 介绍 如 下 : 

党 ” “类 型 ”下 拉 列 表 框 : 在 其 中 可 选择 无 序列 表 的 项 目 符号 类 型 和 有 序列 表 的 编号 

类 型 。 

“项 目 符号 图 像 ”下 拉 列 表 框 : 在 其 中 可 指定 图 像 作为 无 序列 表 的 项 目 符号 ， 可 

直接 在 其 中 输入 图 像 的 路 径 ， 也 可 单 击 CE 瑟 按钮 ， 在 弹出 的 对 话 框 中 选择 图 像 。 

党 ” “位 置 ” 下 拉 列 表 框 : 在 其 中 可 以 选择 列表 文本 是 否 换行 和 缩 进 。“ 外 ”选项 表 
示 当 列表 过 长 而 自动 换行 时 以 缩 进 方式 显示 ; “内 ”选项 表示 当 列 表 过 长 而 自动 
换行 时 不 缩 进 。 
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样式 进行 设置 ， 如 图 4-18 所 示 。 


的 样式 进行 设置 (其 实 该 样式 是 将 应 用 了 该 样式 的 文本 放 到 层 中 ， 该 样式 实质 是 设置 层 的 
属性 ) ， 如 图 4-17 所 示 。 


7.， 定位 
在 “CSS 规则 定义 ”对 话 框 的 “分 类 ”列表 框 中 选择 “定位 ”选项 ， 在 其 中 可 对 定位 
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4-17 定位 属性 


其 中 各 个 选项 的 功能 介绍 如 下 : 
党 ” “类 型 ”下 拉 列 表 框 : 用 于 设置 定位 的 方式 ， 选择 “绝对 ”选项 可 以 使 用 “定位 ” 

栏 中 输入 的 坐标 相对 于 页 面 左上 角 来 放置 层 ; 选择 “相对 ”选项 可 以 使 用 “定位 ” 
栏 中 输入 的 坐标 相对 于 对 象 当前 位 置 来 放置 层 ; 选择 “静态 ”选项 可 以 将 层 放 在 
文本 中 。 

“显示 ”下 拉 列 表 框 : 确定 层 的 显示 方式 ， 选 择 “继承 ”选项 将 继承 父 层 的 可 见 
性 属性 ， 如 果 没有 父 层 ， 则 可 见 ; 选择 “可 见 ” 选 项 将 显示 层 的 内 容 ; 选择 “ 隐 
藏 ”选项 将 隐藏 层 的 内 容 。 

“2Z 轴 ” 下 拉 列 表 框 : 确定 层 的 堆 合 顺序， 编号 较 高 的 层 显示 在 编号 较 低 的 层 的 
上 面 。 

“溢出 ”下 拉 列 表 框 : 确定 当 层 的 内 容 超 出 层 的 大 小 时 的 处 理 方式 ， 选 择 “ 可 见 ” 
选项 将 使 层 向 右 下 方 扩展 ， 使 所 有 内 容 都 可 见 ; 选择 “隐藏 ”选项 将 保持 层 的 大 
小 并 剪辑 任何 超出 的 内 容 ; 选择 “滚动 ”选项 将 在 层 中 添加 滚动 条 ， 不 论 内 容 是 
否 超出 层 的 大 小 ; 选择 “自动 ”选项 ， 则 当 层 的 内 容 超 出 层 的 边界 时 显示 滚动 条 。 
“ 置 入 ” 栏 : 指定 层 的 位 置 和 大 小 。 

。 “ 裁 切 ” 栏 : 定义 层 的 可 见 部 分 。 


8. 扩展 
在 “CSS 规则 定义 ”对 话 框 的 “分 类 ”列表 框 中 选择 “扩展 ”选项 ， 在 其 中 可 对 扩展 
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设置 后 的 效果 
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4-18 设置 扩展 


其 中 各 个 选项 的 功能 介绍 如 下 : 

党 “分 页 ” 栏 : 控制 打印 时 在 CSS 样式 的 网 页 元 素 之 前 或 者 之 后 进行 分 页 。 

党 。 “ 光 标 ”下 拉 列 表 框 : 设置 鼠标 指针 移动 到 应 用 CSS 样式 的 网 页 元 素 上 的 形状 。 

必 “过 滤器 ”下 拉 列 表 框 : 设置 应 用 CSS 样式 的 网 页 元 素 的 特殊 效果 ， 不 同 的 选项 
有 不 同 的 设置 参数 。 


4.3 管理 CSS 样式 


在 Dreamweaver CS3 中 不 但 可 以 方便 地 创建 出 CSS 样式 ， 还 可 以 方便 地 管理 CSS 样 
式 ， 包 括 对 样式 的 修改 、 删 除 及 链接 外 部 样式 表 文 件 等 。 


4.3.1 编辑 CSS 样式 


编辑 CSS 样式 有 两 种 方法 : 一 种 是 在 “CSS 规则 定义 ”对 话 框 中 进行 修改 ; 另 一 种 是 
直接 在 “CSS 样式 ”面板 中 修改 ， 其 介绍 如 下 : 
党 ”在 “CSS 规则 定义 ”对 话 框 中 进行 修改 : 选择 要 修改 的 样式 ， 比 如 选择 “redfont” 
a 选项 ， 然 后 单 击 右 下 角 的 次 按钮 ， 在 弹出 的 对 话 框 中 进行 修改 编辑 。 


学 在 “CSS 样式 ”面板 中 修改 : 选择 要 修改 的 样式 ， 比 如 选择 “redfont” 选 项 ， 然 
后 在 “ “redfont” 的 属性 ” 栏 中 进行 修改 编辑 。 
~、 、 
~ 中 > \ 
S. _、 小 本 女 ， 除 了 上 面 两 和 方法 可 个 和 ， 
局 必 cssfta 19 刘 alBRHB， 方 上 2g 了 , 等 我 全。 以 
这 样 可 让 Css 代码 更 整齐、 更 规 熟悉 了 网 页 制作 后 ， 再 直 

| 范 ， 不 过 这 个 难度 高 ， 不 运 合 初 et 

Il 1 学 者 使 用 哆 。 » 
2 A - 
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4.3.2 删除 CSS 样式 


在 制作 CSS 样式 时 ， 难 免 会 出 现 不 需要 的 某 个 CSS 样式 或 整个 外 部 样式 ， 这 时 可 将 
其 删除 。 在 “CSS 样式 ”面板 中 选择 要 删除 的 CSS 样式 或 外 部 样式 表 文 件 ， 单 击 军 按 钮 即 
可 删除 该 CSS 样式 或 外 部 样式 表 文 件 ， 如 图 4-19 所 示 。 如 果 发 现 误 删 除了 某 样式 或 外 部 
样式 表 文 件 ， 可 按 【Ctrl+Z】 键 进行 恢复 。 


vess 把 wes 二 
Cs 荆 ER 
| 全 部 | 正在 | 全 部 | 正在 | 

1 abl 

tabl t: 

e 号 
了” 的 属性 全 ”的 尾 性 
be Md) 名 请 可 汪 M+ 名 全 可 


4-19 删除 CSS 样式 


4.3.3 ”链接 外 部 CSS 样式 表 


在 制作 网 页 的 过 程 中 ， 为 了 便于 对 其 进行 管理 ， 可 使 用 外 部 CSS 样式 对 其 进行 定义 ， 
其 具体 操作 如 下 : 
步 又 1 单 击 “CSS 样式 ”面板 中 的 “附加 样式 表 ” 按钮 厅 ， 弹 出 “链接 外 部 样式 表 ” 
步骤 2 在 “文件 /URL” 下 拉 列 表 框 中 输入 外 部 样式 表 文件 的 路 径 及 名 称 ， 在 “添加 
为 ” 栏 中 选中 “链接 ” 单 选 按钮 ， 如 图 4-20 所 示 。 
步骤 3 单 击 珀 醋 汪 按钮 关闭 对 话 框 ， 外 部 样式 表 文件 即 链接 到 当前 页 面 中 ， 此 时 
“CSS 样式 ”面板 如 图 4-21 所 示 。 


链接 外 部 样式 表 
xm 
尖 加 为 :人 链接 
csxo 交 
捍 体 o:[ 加 > 
您 也 可 以 答 入 逗号 分 隔 的 媒体 类 型 列表 。 
Jreanweayer 的 范例 样式 表 可 以 帮助 您 起 步 室 Mz 加 请 名 
图 420 “链接 外 部 样式 表 ”对 话 杠 图 4.21 链接 好 的 外 部 样式 表 
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4.4 应 用 CSS 样式 


前 面 认识 了 CSS 样式 ， 学 会 了 创建 CSS 样式 ， 以 及 管理 和 编辑 CSS 样式 ， 但 是 这 不 
代表 新 建 的 CSS 样式 会 应 用 到 网 页 的 相应 位 置 。 下 面 将 讲解 如 何 应 用 CSS 样式 ， 其 方法 
介绍 如 下 : 

党 ”使 用 网 页 元 素 的 属性 面板 : 选择 页 面 中 要 应 用 CSS 样式 的 网 页 元 素 ， 在 “属性 ” 

面板 的 “样式 ”下 拉 列 表 框 中 选择 相应 的 样式 名 称 即 可 ， 如 图 4-22 所 示 。 

党 ”使 用 网 页 元 素 的 快捷 菜单 : 在 页 面 中 要 应 用 CSS 样式 的 网 页 元 素 上 右 击 , 在 弹出 

的 快捷 菜单 中 选择 “CSS 样式 ”命令 ， 然 后 在 弹出 的 子 菜单 中 选择 相应 样式 名 称 
即 可 。 另外 ,在 快捷 菜单 中 选择 最 上 方 的 “无 ”命令 ,可 以 取消 CSS 样式 的 应 用 。 
选择 “新 建 ”命令 ， 可 以 链接 外 部 CSS 文件 ， 如 图 4-23 所 示 。 


Shiftt15 | 讼 计 则 间 邮 ) 


图 4.22 使 用 “属性 ”面板 图 4-23 使 用 快捷 菜单 


党 ”使 用 CSS 样式 的 快捷 菜单 : 在 页 面 中 选择 要 应 用 CSS 样式 的 网 页 元 素 ， 然 后 在 
“CSS 样式 ”面板 中 选择 需要 使 用 的 CSS 样式 , 右 击 并 在 弹出 的 快捷 菜单 中 选择 
“套用 ”命令 即 可 ， 如 图 4-24 所 示 。 


y 
a ”魔法 档案 一 一 一 一 一 一 一 
上 面 的 操作 方法 都 是 可 视 化 操作 ， 
通过 这 种 方法 操作 速度 快 ， 易 学 会 ， 但 一 个 网 


站 的 设计 者 是 应 该 熟悉 代码 的 ， 在 代码 下 应 用 
CSS 代码 很 简单 ， 如 果 定 义 的 是 类 CSS 样式 ， 
只 需 在 首 标 签 内 输入 class=“ 样 式 名 ” 即 可 ， 如 
<p class=“lv”></p>; 如 果 定 义 的 是 标签 ， 则 
在 首 标签 里 输入 id= “样式 名 ”， 如 <p id= 
“p1”></p>。 
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a 
4.5 整理 CSS 样式 


Dreamweaver CSS 虽然 十 分 优秀 ， 但 是 在 可 视 化 操作 中 同样 也 会 出 现 许 多 元 余 代码 和 
垃圾 代码 ， 而 代码 过 长 会 影响 网 页 打开 的 速度 ， 且 不 易 修改 和 维护 ， 所 以 设计 者 往往 会 对 
代码 进行 整理 。 简 化 代码 主要 是 从 以 下 两 方面 着 手 。 


4.5.1 增加 代码 重用 率 


代码 重用 是 CSS 的 优势 之 一 ，CSS 编写 虽然 已 经 使 网 站 中 大 部 分 样式 代码 得 到 重用 ， 
但 是 基于 设计 者 本 身 的 原因 ，CSS 的 众多 样式 中 ， 往 往 有 许多 样式 代码 是 一 样 的 ， 却 没有 
得 到 好 好 重用 。 下 面 我 们 来 对 比 一 下 两 组 代码 ， 两 者 效果 一 样 ， 前 者 没有 经 过 优化 ， 后 者 
是 优化 了 的 ， 如 图 4-25 所 示 。 


nargin: Opx 
padding: Upx 


Aheader [ 


padding: 1Dpx 
background-colori#Efbf00 


#header hl{ 
font-si2e; 26py “{ 
oolor:#FFFFFR nargin: Dpx 
padding: px 


na ] 
Floatt Loft #header, a 
padding: LDpx ol 
background-color:#636a58 
height: 500px 
Hont-size: ldox 


de 
eolor: FFFFFR backeroumd-color:#f1bf0: 


#eontent | theader hlf 
beckero font-sire: 26px 


#eontent ul 
nargin: px 

“stylell 
background-color:#000C35 

1 

tyle2l 
hackeground-color:#cCOc00 

Line-space: 150% 


1 
《styley 
4-25 对 比 代码 


初学 者 即使 不 知道 大 括号 里 面 的 代码 是 什么 意思 ， 也 能 从 第 一 幅 图 中 看 出 ， 有 许多 代 
码 重复 ， 造 成 了 代码 过 长 ， 如 何 减少 代码 呢 ? 如 样式 “ 趣 eader”、“ 加 av”、“ 拓 ontent” 
都 有 “padding:10px” 这 个 样式 ， 所 以 应 该 将 其 合并 ,修改 为 #beader,#nav,#content {padding: 
10px;}， 样 式 标签 名 之 间 用 逗号 (.) 隔 开 ， 又 如 页 面 中 大 部 分 元 素 属性 都 具有 “margin: 
opx; ”的 属性 ， 所 以 优化 之 后 使 用 * 选 择 符 ， 直 接 对 页 面 中 margin 及 padding 的 值 进行 了 
设置 ， 因 此 如 果 遇 到 相同 的 代码 ， 用 户 要 尽量 把 它 写 到 一 个 大 括号 中 。 


左 | 


地 / 


Ss 
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二 简化 CSS 代码 的 主要 途径 就 是 使 用 CSS 缩写 与 群 组 选择 符 进 行 代码 的 优化 , 对 于 本 例 来 
说 只 是 一 个 非常 小 的 简化 ， 而 当 CSS 代码 出 现 数 十 行 甚至 上 百 行 时 ， 其 优势 就 显得 尤为 明显 。 不 过 
在 使 用 群 组 选择 符 的 同时 ， 除 了 对 公共 属性 的 整理 ， 还 有 一 点 非常 重要 的 是 一 定 要 根据 当前 页 面 的 
情况 进行 合理 的 整理 ， 不 能 仅仅 为 了 减少 代码 而 去 重新 编写 公共 属性 。 


4.5.2 使 用 样式 覆盖 进行 简化 


CSS 样式 中 对 某 一 元 素 如 果 应 用 了 多 个 样式 代码 ， 在 一 般 情况 下 ， 往 往 是 后 一 段 代码 
替代 前 一 段 代码 , 因此 利用 这 个 特性 , 可 以 采用 覆盖 的 方式 , 使 得 代码 得 到 重用 , 如 图 4-26 
所 示 。 


<meta http-equiv="Content-Type” content= text/htnl: charset=gb2312' 7> 
《style> 
-1sl,.1s2,.1s3( 

font-size: 12px; 

list-style:none:; 

width: 300px; 

padding: 10px; 

background-color:#EEEEEE. 
} 
alt 

border: lpx solid #4bded5; 
} 


.1s2{ 
border: lpx solid #ac4dbd5; 


.1s3{ 
border: lpx solid #82d54b; 


/style> 


4-26 ”优化 前 的 代码 


A -DINED 全 


魔法 师 ， 在 Dreamweaver CS3 通过 可 视 化 操作 , 基本 上 是 一 个 
中 , 可 视 化 操作 为 什么 不 符合 对 象 一 段 CSS 代码, 这 样 会 有 许 
要 求 , 它 是 怎么 生成 一 个 代码 多 重复 的 代码 ， 所 以 我 们 要 学 会 
的 呢 ? 自己 整理 CSS 代码 的 方法 。 |# 


区 > 


对 于 上 面 的 代码 ， 我 们 完全 可 以 根据 代码 重用 的 原则 将 其 公共 属性 使 用 群 组 选择 符 进 
行 公用 ， 但 是 3 个 样式 的 边框 样式 看 上 去 除了 颜色 不 同 之 外 ， 其 他 属性 并 没有 什么 区 别 ， 


一 学 就 会 谋 法 书简 
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这 时 可 以 将 其 归 为 公共 属性 , 通过 单独 的 颜色 修改 来 控制 各 个 不 同 的 样式 。 如 图 4-27 所 示 
即 为 通过 覆盖 的 方式 来 优化 CSS 代码 后 的 效果 。 


meta http-equl= Content-Iype content= textyhtml; charset=g 
<style> 
.1sl,.1s2,.1s3{ 
font-size: 12px; 
list-style:none; 
width: 300px; 
padding: 10px; 
background-color:#EEEFEF 
border: lpx solid #dbded5 
} 
“时 
[border-color:#acdbd5 
} 
:1321 
border-color:#acdbd5 ; 


.1s3{ 
border-color:#82d54b; 
} 
/style> 
4-27 优化 后 的 CSS 代码 


优化 后 的 代码 ， 使 3 个 样式 都 具有 了 一 种 颜色 的 边框 设置 ， 再 根据 每 一 个 样式 的 边框 
颜色 有 所 不 同 ， 只 需要 用 border-color 设置 新 的 颜色 即 可 ,新 的 颜色 将 覆盖 之 前 的 颜色 ,从 
而 实现 使 用 覆盖 进行 优化 。 在 网 站 的 设计 开发 中 ， 本 节 中 的 代码 往往 只 是 常见 情况 ， 实 际 
上 可 以 优化 的 地 方太 多 ， 可 以 根据 网 站 实际 开发 需求 及 样式 的 编码 方式 ， 根 据 不 同情 况 分 
别 对 待 ， 最 终 实现 CSS 代码 的 优化 、 简 化 ， 使 之 更 简洁 和 合理 。 在 后 面 的 章节 中 还 会 涉及 
CSS 样式 ， 我 们 还 会 继续 讲解 CSS 的 相关 内 容 ， 读 者 朋友 可 以 慢 慢 理解 CSS 代码 优化 的 
重要 性 ， 这 里 只 是 作 个 简单 介绍 。 
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初学 者 因为 不 熟悉 代码 ， 在 整理 代码 时 常常 会 出 错 ， 可 能 导致 原来 代码 的 效果 都 不 见 了 ， 
所 以 在 整理 代码 时 ， 初 学 者 应 记 住 备份 后 再 进行 修改 ， 这 样 就 可 以 保证 原来 的 代码 依然 存在 。 对 设 
计 的 网 站 进行 备份 是 非常 重要 的 。 


4.6 典型 实例 一 一 用 CSS 样式 美化 网 页 


本 章 学 习 了 CSS 样式 的 相关 知识 ，CSS 样式 是 网 页 中 的 格式 工具 ， 它 涉及 网 站 的 前 期 
制作 、 后 期 制作 ， 合 理 地 使 用 它 十 分 的 重要 。 下 面 以 制作 “再 见 ， 沙 扬 娜 拉 ” 为 例 ， 定 义 
一 个 网 页 ， 从 而 练习 使 用 CSS 样式 ， 最 终 效果 (光盘 :\ 最 终 效 果 \ 第 4 章 \syllsylLhtml) 如 
4-28 所 示 。 
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具体 操作 如 下 : 


4-28 最终 效果 


步 又 1 将 素材 文档 (光盘 :\ 素 材 \ 第 4 章 \sy 疏 ) 复 制 到 站 点 目录 下 , 双击 网 页 文件 “syll. 


html” 


， 启 动 Dreamweaver CS3。 


步骤 2 按 ShifttF11 键 打开 “CSS 样式 ”面板 ， 单 击 “CSS 样式 ”面板 中 的 入 按钮 ， 
如 图 4-29 所 示 。 

步 桑 3 弹出 “新 建 CSS 规则 ”对 话 框 ， 在 “新 建 CSS 规则 ”对 话 框 中 按 如 图 4-30 
所 示 进 行 设置 ， 单 击 纪 酉 按钮 。 


Fvcss 一 | ~ 
| 小 岂 女 ， 通 过 页 面 设置 
| 全 | 天 也 能 实现 相同 的 效果 ， 
所 有 规则 那 是 第 3 章 的 内 容 哆 。 
埃 、 4 

尾 性 1 
于 人 4 名 [可 

图 4-29 “CSS 样式 ”面板 4-30 “新 建 CSS 规则 ”对 话 框 
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步骤 4 弹出 “CSS 规则 定义 ”对 话 框 ， 在 “分 类 ”列表 框 中 默认 选择 “类 型 ”选项 ， 
在 “大 小 ”下 拉 列 表 框 中 选择 “18” 和 “像素 ”选项 ， 如 图 4-31 所 示 。 

步骤 $ 在 “分 类 ”列表 框 中 选择 “背景 ”选项 ， 在 “背景 图 像 ” 下 拉 列 表 框 中 输入 
背景 图 像 的 路 径 及 名 称 “images/bj.jpg”， 单 击 蔬 旺 按钮 ， 如 图 4-32 所 示 。 


图 4-31 设置 字体 图 4-32 设置 背景 


步 又 6 ”在 “所 有 规则 ” 栏 空白 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “新 建 ” 命 令 ， 如 
图 4-33 所 示 。 
步 又 7 在 弹出 的 “新 建 CSS 规则 ”对 话 框 中 进行 如 图 4-34 所 示 的 设置 , 单 击 己 mE_ 


按钮。 
Hwcss 3 


| 全 部 | 在 


所 有 规则 
日 


转 到 代码 (@) 


他 ).…. 渤 择 命令 
复制 加) . 全 人 


重 命名 类 让 

编辑 选择 器 @) 

移动 Css 规则 吕 ).. . 

套用 必 ) 

图 4-33 选择 “新 建 ”命令 图 4-34 “新 建 CSS 规则 ”对 话 框 

步 又 8 弹出 “CSS 规则 定义 ”对 话 框 ， 在 “分 类 ”列表 框 中 选择 “定位 ”选项 ， 按 
照 如 图 4-35 所 示 进 行 设置 ， 设 置 完 成 后 ， 单 击 忆 至 站 按钮 。 

步骤 9 将 鼠标 光标 定位 在 文本 中 ， 在 “CSS 样式 ”面板 中 新 创建 的 样式 “.dwl” 上 

右 击 ， 在 弹出 的 快捷 莱 单 中 选择 “套用 ”命令 ， 如 图 4-36 所 示 。 


新 手 学 做 网 站 - 
图 4-35 设置 定位 图 4-36 套用 样式 
步骤 10 在 “CSS 样式 ”面板 中 新 创建 的 “.dw1” 样 式 上 右 击 ， 选 择 “复制 ”命令 ， 
如 图 4-37 所 示 。 
步 又 11 在 弹出 的 “复制 CSS 规则 ”对 话 框 中 进行 设置 后 ， 单 击 书 枉 了 按 钮 ， 如 
图 4-38 所 示 。 
让 WE 有 击 它 
护 久 所 器 6) 
移动 Css 规则 虽 .. 
图 4-37 选择 “复制 ”命令 图 4-38 ”设置 对 话 框 中 的 参数 
步 又 12 双击 新 复制 的 样式 “.p” 文 件 ， 弹 出 “CSS 规则 定义 ”对 话 框 ， 将 字体 设置 
为 “隶书 ”、 设 置 “ 行 高 ”为 “30” 像 素 ， 将 字体 大 小 设置 为 “24” 号 ， 在 
“颜色 ”文本 框 中 输入 “#FF0099”， 如 图 4-39 所 示 。 
步 又 13 在 “分 类 ”列表 框 中 选择 “定位 ”选项 ， 将 定位 所 有 设置 项 清除 ， 然 后 选择 
“边框 ”选项 ， 在 边框 中 设置 其 中 的 参数 ， 将 边线 设置 成 “ 双 线 ”、 宽 度 为 
“中 ”、 颜 色 为 “#EF99FF”， 设 置 完 成 后 ， 单 击 忆 本 四 按钮 ， 如 图 4-40 
所 示 。 
步 又 14 制作 完成 后 ， 选 择 【 文 件 〗/【 保 存 】 命 令 保存 文件 ， 最 终 效 果 如 图 4-28 
所 示 。 
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4 二 x 
回扣 相 月 6) 回 主 可 相同 
twm 同 中 问 3 


图 4-39 设置 字体 图 4-40 设置 边框 
4.7 常见 问题 解答 


A. 魔法 师 ， 同 一 个 CSS 样式 中 可 以 定义 多 少 种 属性 ? 

2£: 同一 个 CSS 样式 可 以 定义 多 种 类 型 的 CSS 规则， 如“.menu_out {FONT-SIZE: 12px; 
CURSOR: hand;} ”就 定义 了 “类 型 ”大 类 中 的 字体 大 小 规则 (font-size:12px) 、“ 扩 
展 ” 大 类 中 的 “光标 ”规则 (cursor:hand》。 


入 : CSS 控制 着 整个 网 页 ， 但 通过 Dreamweaver CS3 书写 代码 会 出 现 许多 宛 余 代码 或 者 
垃圾 代码 ， 是 不 是 可 以 通过 手写 代码 去 减少 它 的 宛 余 代 码 ? 


A 原则 上 是 可 以 的 ， 但 是 不 提倡 大 家 这 么 做 。Dreamweaver CS3 是 一 个 优秀 的 网 页 工 
有 具 ， 在 制作 网 页 时 ， 应 将 尽量 多 的 工作 交 给 工具 去 完成 ， 当 工具 无 法 完成 或 无 法 达 
到 要 求 时 ， 才 考虑 用 代码 视图 的 方法 编写 代码 。CSS 规则 的 代码 不 是 意味 着 必须 手 ”大昌 
写 代码 ， 提 倡 大 家 用 工具 可 视 化 操作 ， 然 后 整理 代码 ， 这 是 提高 工作 效率 的 唯一 


: 魔法 师 ， 我 是 一 个 初学 者 ， 该 如 何 认识 CSS 的 各 种 属性 ? 


Pa 如 
| 


: 其 实 这 个 没有 大 家 想 的 那么 难 ， 在 Dreamweaver CS3 中 ， 你 只 需 转 到 “ 拆 分 ”视图 
里 ， 当 设置 几 个 属性 后 ， 代 码 会 随 着 可 视 化 操作 而 增加 ， 读 者 朋友 可 以 观察 一 下 其 
中 的 代码 ， 刚 开始 也 许 彼 此 陌生 ， 但 是 经 过 这 样 的 日 积 月 累 ， 和 CSS 见面 多 了 ， 就 


BD 法 
< 新 手 学 做 网 站 这 人 


会 逐渐 认识 CSS 的 属性 代码 ， 在 后 面 也 会 讲解 一 些 常用 的 属性 ， 只 有 真正 认识 了 
CSS 代码 后 ， 才 能 算 掌握 CSS 样式 。 


人 A: 魔法 师 ， 我 听 其 他 人 说 CSS 样式 是 最 近 几 年 才 兴 起 的 ， 是 这 样 吗 ? 


: 是 的 ， 真正 的 CSS 样式 被 设计 者 重视 是 CSS 2.0 面世 的 时 候 ， 它 带动 了 一 次 网 页 革 
命 ， 人 们 为 了 后 期 维护 方便 ， 为 了 去 除 代 码 的 紊乱 ， 提 出 了 实现 网 页 的 表现 和 内 容 
分 离 ， 让 Web 进入 了 新 的 时 代 。 


48 过 关 练 习 


将 素材 文件 (光盘 :\ 素 材 \' 第 4 章 \ms\ims.html) 复制 到 站 点 目录 下 , 在 Dreamweaver CS3 
中 打开 “ms.html”， 将 外 部 CSS 样式 链接 到 网 页 ， 然 后 再 新 建 一 个 CSS 类 样式 ， 将 其 命 
名 为 table， 背 景 颜色 为 “# 盾 6F6F6”， 将 边框 设置 成 1px 的 细 线 ， 颜 色 为 “#40D834”， 


最 终 效果 如 图 4-41 所 示 光 盘 :\ 最 终 效果 \ 第 4 章 \ms.html) 。 


看 见 这 家 后 的 第 一 眼 就 忍 不 住 想 进去 扫 效 一 
重 ， 想 询 在 水 果 堆 里 打 谭 的 后 苋 就 应 该 很 更 ， 口 
水 都 思 不 性 要 流出 来 卫 。 赴 进去 特 了 几 份 美食 就 
但 不 绎 自己 多 长 几 张 轨 多 生 几 个 由 ， 一 大 串 的 
美味 一 一 烧 基 未 汐 胡 萨 沙 拉 、 香 草 果 拓 烤 羊 排 、 

墨 盏 哥 牛 内 所 、 艺 士 蛋 粒 …… 这 些 都 无 法 拒 怒 ， 
圭一 发 脑 儿 全 里 进 杜 子 里 才 钢 和 踏实 . 


委 基 主义 


! 


A 


4-41 最 终 效果 


用 Div+CSs 布局 网 页 
编辑 Div+CSS 
特殊 的 布局 方式 一 一 框架 


典型 实例 一 一 布局 个 人 网 页 
Se 


魔法 师 : 


小 魔女 : 


魔法 师 : 


小 魔女 : 
魔法 师 : 


新 建 网 页 后 ， 用 户 肯定 
页 面 的 左上 部 放 一 些 内 
边 放 一 些 内 容 。 

是 的 ， 我 就 想 在 网 页 的 上 边 放 
一 个 图 片 ， 左 边 放 新 闻 ， 右 边 
放 笑 话 , 可 是 我 没有 办 法 做 到 。 
小 和 魔女， 这 时 就 需要 对 网 页 进 
行 布 局 ， 布 局 就 是 规划 网 页 ， 
使 网 页 看 起 来 更 美观 。 

布局 ， 要 用 什么 工具 呢 ? 

在 早期 制作 网 页 时 布局 通常 是 
用 表格 和 铅 套 表格 来 实现 的 ,但 
是 那 种 传统 的 方式 不 易 维护 , 现 
在 流行 应 用 Div+CSss 布局 。 


: CSS 我 明白 。 它 是 样式 ,但 什 


么 是 Div 呢 ? 


: 别 着 急 。 让 我 慢 慢 道 来 。 


As 法 : 
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5.1 用 Div+CSS 布局 网 页 


以 前 ,设计 者 都 习惯 于 用 表格 布局 网 页 ， 但 车 使 用 的 表格 过 多 则 会 影响 页 面 的 下 载 速 
度 ， 所 以 随 着 CSS 的 发 展 ， 表 格 逐 渐 退回 到 它 的 本 质 功能 一 一 用 来 表现 数据 ， 所 以 现在 设 
计 者 们 都 采用 Div+CSS 的 方式 来 布局 。 CSS 是 指 CSS 样式 , Div 是 一 个 标签 , 是 层 的 意思 ， 
Div+CSS 就 是 用 层 和 样式 来 布局 整个 网 页 ，Div 负责 页 面 内 容 ，CSS 负责 定位 、 格 式 等 。 


5.1.1 通过 插入 Div 标签 布局 网 页 


在 Dreamweaver CS3 中 , 用 Div+CSS 布局 十 分 简单 , 通过 可 视 化 操作 即 可 完成 。 下 面 
通过 插入 Div 标签 布局 网 页 ， 具 体操 作 如 下 : 
步 又 1 启动 Dreamweaver CS3 新 建 一 个 网 页 ， 选 择 “布局 ”选项 卡 ， 单 击 “ 插 入 
Div 标签 ”按钮 避 ， 如 图 5-1 所 示 。 
步 又 2 弹出 “插入 Div 标签 ”对 话 框 ， 在 “ID” 或 者 “类 ”下 拉 列 表 框 中 输入 CSS 
样式 名 称 ， 如 在 “ID” 下 拉 列 表 框 中 输入 “logo”， 单 击 [BEEEEE 了 按钮 ， 如 
图 5-2 所 示 。 


[CT 
ECIDIEDIEIEEREIIEIIDIECEGEE33 
和 Rx 


于 下 


图 5-1 单 击 “ 插 入 Div 标签 ”按钮 图 5-2 “插入 Div 标签 ”对 话 框 

步 又 3 弹出 “新 建 CSS 规则 ”对 话 框 ， 选 中 Cm PSSt88S) @ 单 选 按钮 ， 再 选中 
权 3 呆 单 选 按钮 ， 然 后 单 击 弓 栈 瑟 按钮。 

步骤 4 弹出“#logo 的 CSS 规则 定义 ”对 话 框 ， 在 “分 类 ”列表 框 中 选择 “定位 ” 
选项 ， 然 后 在 “类 型 ”下 拉 列 表 框 中 选择 类 型 方式 ， 如“ 绝对”， 在 “显示 ” 
列表 框 中 选择 一 个 选项 ， 如 “可 见 ”选项 。 在 “ 宽 ” 和 “高 ”列表 框 中 输入 
相应 的 数值 和 单位 ， 然 后 在 定位 栏 中 的 “上 ”列表 框 中 输入 数值 ， 如 “2”， 
在 “ 左 ” 列 表 框 中 输入 数值 ， 如 “50”， 设 置 完 成 后 ， 单 击 C 厂 按 钮 ， 
如 图 5-3 所 示 。 


一 学 玖 会 谨 法 书 阐 


As 
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步 又 5 返回 到 “插入 Div 标签 ”对 话 框 , 单 击 C 本 按钮 , 最 终 效 果 如 图 5-4 所 示 。 


Lahrmml OAM 


IE 三 8 示 这 Teo 的 内 容 


图 5-3 设置 “定位 ”参数 图 5-4 ”最终 效果 


大 力 测试 
启动 Dreamweaver CS3 新 建 一 个 网 页 ， 将 其 保存 在 D 盘 根 目 录 下 , 文件 名 为 “index.html”， 


然后 通过 “插入 Div 标签 ”的 方式 插入 一 个 名 为 “left” 的 层 ， 将 其 宽度 设置 为 “200px”、 高 度 设置 
为 “350px”, 将 类 型 方式 选择 “绝对 "定位 ,设置 层 的 左上 角 的 一 点 距 左边 为 “20px”, 距 顶 部 为 “350px” 
的 位 置 ， 然 后 再 将 其 保存 。 


5.1.2 ”通过 绘制 AP Div 布局 网 页 


在 Dreamweaver CS3 中 ， 还 有 更 简单 的 方法 就 是 绘制 AP Div 布局 ， 具 体操 作 如 下 : 

步骤 1 启动 Dreamweaver CS3 新 建 一 个 网 页 ， 选 择 “布局 ”选项 卡 ， 单 击 “ 绘 制 
AP Div” 按 钮 皇 ， 如 图 5-5 所 示 。 

步 又 2 单 击 后 ， 在 编辑 窗口 中 任意 绘制 一 块 区 域 ， 将 完成 区 域 的 布局 ， 如 图 5-6 所 
示 ， 一 个 网 页 可 通过 这 个 绘制 标签 绘制 多 个 AP Div 完成 布局 网 页 。 | 


BS > 
Ne 区 


小 魔女 ,这 样 布局 ， 完 全 可 视 A 

化 操作 ， 软 件 自动 生成 CsS 魔法 师 ， 确 实 很 方便 ， Sy 

样式 代码 , 完成 页 面 区 域 的 布 也 很 简单 ,等 你 讲 完了 ， 

局 ， 是 不 是 非常 简单 ? 我 一 定 练习 。 » 
jh ti 
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国 抽 +| 标本 两 5 吉文 种 


图 5-5 单 击 “ 绘 制 AP Div” 按 钮 图 5-6 绘制 AP Div 


步 又 3 单 击 回合 按 钮 ， 转 换 成 代码 视图 ， 这 里 要 对 CSS 样式 的 名 称 进 行 修改 ， 将 
“apDiv1” 修 改 成 其 他 名 称 ， 以 方便 识别 ， 如 选择 “apDi v1” 文 本 ， 将 其 修 
改 为 “news”， 如 图 5-7 所 示 。 


CDOT NET PELIC -77N3C77DTD XRD TD 
Transiclonal/ /EN” 

mherp: /nena.org/TR/xhrnl 1 /TD /xhral -eranat 
tional, ded"> 

hoal xalnse"htep: / /we. v3 org/1999/xnrml"> 


坐标 位 置 


! ER 
Translclonal/ /EI 


Pina. w3, org /TR /haLL/VTD /xhtnl -transt 
tionel. dcd”> 

chral xnlnse"http: /ww3, org/1899 /honl"> 
cheaey 

-er htrp-eqiee"Content-Type” contente 
“text/html; charseteitf-6" /> 
<ticle) 天 标题 文 入 cjtitle> 


<acrle types"text/css"> 


c/sryle> 
head 


aa 


~ 


小 魔女 ， 用 “AP Div” 绘 制 布局 ， 他 的 
称 ，“ap Divly 和 “news” 默认 名 是 “apDiv 1”、 “apDiv 2” 网 


Ws 
对 页 面 的 效果 不 一 样 吗 ? 当 一 个 网 页 中 的 Css 
24 样式 都 是 这 些 命名 , 谁 能 看 懂 ? 所 以 我 


"3 们 要 给 它 一 个 便于 认识 的 名 字 , 这 样 广 
便 后 其 维护。 


di 


魔法 师 ， 为 什么 要 修改 名 


“apDiv 3” 


4 
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5.2 编辑 Div 


层 在 网 页 中 有 着 不 可 蔡 代 的 作用 ， 在 创建 层 的 过 程 中 不 可 能 一 步 到 位 ， 所 以 许多 时 候 
需要 修改 Div 的 属性 ， 即 对 应 的 CSS 属性 才能 达到 用 户 的 要 求 。 


5.2.1 认识 “AP 元 素 ” 面 板 


层 在 Dreamweaver 中 有 相应 的 面板 , 在 早期 的 版 本 中 , 叫 “ 层 ”面板 , 在 Dreamweaver 
CS3 中 ， 它 稍稍 改变 了 称呼 ， 称 为 “AP 元素” 面板 。 在 “AP 元 素 ” 面 板 中 可 以 对 层 进行 
管理 与 操作 ， 如 图 5-8 所 示 。 


vcss 到 
选中 该 复 选 框 可 以 防止 层 重 登 IE 站 下 站 

[BL[_ 和 鱼 | 
单 击 该 列 可 设置 对 应 层 的 可 见 ”| EB or 
性 ， 多 次 单 击 可 以 在 各 种 状态 。 | 它 ey 


变 为 日 图 标 并 展开 子 层 , 再 次 
其 中 图 标 表示 不 
eed 单 击 则 可 折 筹 子 层 并 变 为 国 
可 见 ， 克 图 标 表 示 可 见 ， 空 


白 则 表示 未 指定 可 见 性 中 


5-8 “AP 元素 ”面板 


网 页 中 的 层 都 会 显示 在 “AP 元 素 ” 面 板 的 列表 中 ， 并 且 各 和 嵌 套 层 以 树 状 结构 显示 ， 
在 “ 层 ” 面 板 中 可 以 进行 的 操作 介绍 如 下 : 
双击 层 名 称 可 对 层 进 行 重 命名 。 
单 击 层 后 面 的 数字 可 修改 层 的 重 登 顺序 即 Z 轴 顺序 ， 数 值 大 的 将 位 于 上 层 。 
单 击 层 名 称 可 以 选中 该 层 ， 选 中 的 层 会 反 显 。 
选中 某 层 后 ， 按 住 鼠 标 左 键 不 放 ， 向 上 或 向 下 拖 动 层 到 合适 位 置 可 以 设置 层 的 重 
梧 顺 序 。 


5.2.2 ”选择 层 


在 可 视 化 情况 下 ， 如 果 要 编辑 层 ， 则 需要 选择 层 ， 选 择 层 可 以 在 编辑 区 选择 层 ， 也 可 
在 “AP 元 素 ”面板 中 选择 层 。 


1， 选 择 单个 层 
单个 层 的 选择 十 分 简单 ， 下 面 讲解 两 种 选择 方法 ， 分 别 介绍 如 下 : 
学 ”通过 边框 选择 层 : 单 击 所 需 层 的 边框 可 选择 该 层 ， 如 图 5-9 所 示 。 


党 通过 “AP 元 素 ”面板 选择 层 : 在 层面 板 中 单 击 所 需 层 的 名 称 可 选择 该 层 ， 如 
图 5-10 所 示 。 


0 
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/ 
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图 5-9 通过 边框 选择 层 图 5-10 通过 “AP 元 素 ”面板 选择 层 
2.， 选择 多 个 层 
要 选择 多 个 层 ， 只 需要 按 住 【Shift】 键 依次 在 各 个 层 或 层 边框 上 单 击 即 可 。 
5.2.3 ”调整 层 


创建 的 层 不 一 定 符合 网 页 制作 的 标准 ， 此 时 需要 对 层 进 行 调整 ， 如 拖 动 、 对 齐 和 调整 
各 个 层 的 大 小 等 。 


1， 拖 动 层 
可 以 灵活 移动 是 层 的 优点 ， 在 Dreamweaver CS3 中 可 以 随意 将 层 放置 于 页 面 的 任何 位 


置 ， 选 择 需 要 拖 动 的 层 ， 将 鼠标 指针 移动 到 层 边 框 上 ， 当 其 变 为 中 形状 时 ， 按 住 鼠 标 左 键 
不 放 并 拖 动 到 需要 的 位 置 后 释放 鼠标 即 可 ， 如 图 5-11 所 示 。 


5-11 拖 动 层 


由 
魔法 档案 
有 的 时 候 层 需要 准确 定位 ， 拖 动 层 到 另 一 位 置 实际 上 也 是 定位 ， 拖 动 后 CSS 样式 代码 发 
生 相应 的 变化 ， 如 果 需 要 精确 定位 ， 则 不 建议 拖 动 ， 而 是 直接 在 CSS 面板 中 输入 Div 左上 角 的 坐标 
修改 当前 的 位 置 ， 也 可 在 选择 层 后 ， 在 “属性 ”面板 中 修改 其 位 置 。 


2. 调整 层 的 大 小 
在 可 视 化 操作 中 ， 调 整 层 的 大 小 的 方法 比较 简单 ， 只 需 将 鼠标 停留 在 控制 点 上 ， 当 鼠 


:时 
ma/ 第 5 章 ， 网 页 的 规划 设计 师 摘 法 已 


标 光 标 变 成 双向 箭头 时 ， 就 可 拖 动 鼠标 改变 层 的 大 小 ， 如 图 5-12 所 示 。 


Lc 


图 5-12 调整 层 的 大 小 


5.2.4 层 的 “属性 ”面板 


层 的 “属性 ”面板 可 以 控制 层 的 许多 属性 , 因此 用 户 修改 常规 属性 则 不 需要 通过 “CSS 
样式 ”面板 进入 “规则 定义 ”对 话 框 修改 其 属性 ， 而 是 通过 “属性 ”面板 完成 相应 的 操作 ， 
如 图 5-13 所 示 。 


Tv 属性 所 
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5-13 层 的 “属性 ”面板 

其 中 各 个 选项 的 功能 分 别 介绍 如 下 
人 学”“ 层 编号 ”下 拉 列 表 框 : 可 为 当前 层 命 多， 用 于 在 脚本 中 引用 该 层 。 
党 ”“ 左 ”文本 框 : 可 在 其 中 设置 层 左边 相对 于 页 面 左边 或 父 层 左边 的 距离 。 
党 “上 ”文本 框 : 可 在 其 中 设置 层 顶端 相对 于 页 面 顶端 或 父 层 顶端 的 距离 。 
党 “ 宽 ” 文 本 框 : 可 在 其 中 设置 层 的 宽度 值 。 
学”“ 高 ”文本 框 : 可 在 其 中 设置 层 的 高 度 值 。 
学”“ 背 景 图像 ” 文 本 框 : 用 于 设置 背景 图 像 ， 单 击 已 按钮 ， 在 弹出 的 “选择 图 像 源 
文件 ”对 话 框 中 选择 背景 图 像 。 
“Z 轴 ” 文 本 框 : 设置 层 的 Z 轴 顺序 ， 也 就 是 设置 说 套 层 在 网 页 中 的 重 登 顺序 ， 
较 高 值 的 子 层 位 于 较 低 值 的 子 层 上 方 。 
“类 ”下 拉 列 表 框 : 可 在 其 中 选择 层 的 样式 。 


二 


| 


党 ” “可 见 性 ”下 拉 列 表 框 : 设置 层 的 可 见 性 。 

党 ”“ 涪 出 ”下 拉 列 表 框 : 选择 当 层 中 的 内 容 超出 层 的 范围 后 显示 内 容 的 方式 。 

党 ” “背景 颜色 ”文本 框 : 可 在 其 中 设置 层 的 背景 颜色 。 

党 ”“ 剪 辑 ” 栏 : 在 该 栏 中 可 设置 层 的 可 见 区 域 。 其 中 ，“ 左 ”、“ 右 ”、“ 上 ”、 
“下 ”4 个 文本 框 分 别 用 于 设置 层 在 各 个 方向 上 的 可 见 区 域 与 层 边界 的 距离 ， 单 
位 为 像素 。 
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5.3 特殊 的 布局 方式 一 一 框架 


框架 也 是 网 页 的 布局 工具 ， 层 布局 和 框架 布局 各 有 特点 ， 适 用 的 范围 也 不 同 ， 层 布局 
适用 于 普通 网 页 ， 而 框架 布局 适用 于 一 些 特 殊 场 所 ， 如 网 站 后 台 管 理 等 网 页 。 下 面 认 识 一 
下 框架 布局 的 页 面 ， 框 架 页 面 如 图 5-14 所 示 。 
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5-14 框架 布局 页 面 


框架 是 浏览 器 窗口 中 的 一 个 区 域 如 左 侧 的 网 页 区 域 )》， 在 框架 中 可 以 显示 某 一 具体 
的 网 页 ， 而 框架 集 则 记录 了 同一 网 页 上 多 个 框架 的 布局 、 链 接 和 属性 信息 。 可 以 这 样 简单 
地 描述 框架 集 的 结构 一 一 包括 3 个 网 页 ， 其 中 顶部 网 页 为 top.html， 它 占 整 个 窗口 高 度 的 
10%; 在 顶部 框架 下 面 被 拆 分 为 左右 两 部 分 ， 左 侧 的 网 页 为 left.html, 它 占 整个 窗口 宽度 的 
40%; 右 侧 的 网 页 为 righthtml， 占 整个 窗口 宽度 的 60%。 


魔法 档案 

一 个 包含 3 个 框架 的 单个 页 面 ， 实 际 上 至 少 由 4 个 单独 的 Web 文档 组 成 : 框架 集 文件 以 
及 3 个 框架 文档 。 这 3 个 文档 包含 这 些 框架 内 初始 显示 的 内 容 。 当 在 Dreamweaver CS3 中 设计 使 用 
框架 集 的 页 面 时 ， 必 须 全 部 保存 这 4 个 文件 ， 以 使 该 页 面 可 以 在 浏览 器 中 正常 显示 。 


5.3.1 创建 框架 集 


在 Dreamweaver CS3 中 定义 了 多 种 框架 集 ， 可 在 其 中 选择 所 需 的 框架 进行 创建 。 如 果 
对 预定 义 的 框架 不 满意 ， 还 可 以 在 预定 义 框架 的 基础 上 进行 修改 ， 定 义 成 需要 的 框架 集 。 
框架 集 的 创建 有 两 种 方法 : 一 是 直接 创建 预定 义 框架 集 ， 二 是 在 已 有 页 面 中 加 载 预定 义 框 
架 集 。 
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1， 直接 创建 预定 义 框架 集 


下 面 以 创建 一 个 上 方 固定 、 左 边 嵌 套 的 框架 集 为 例 ， 讲 解 如 何 创建 框架 集 ， 具 体操 作 
如 下 : 
步骤 1 启动 DreamweaverCS3， 选 择 【 文 件 〗/【 新 建 】〗 命 令 ， 弹 出 “新 建文 档 ” 对 
话 框 ， 在 左 侧 列表 框 中 选择 “示例 中 的 页 ”选项 。 
步 又 2 在 “示例 文件 夹 ”列表 框 中 选择 “框架 集 ” 选 项 ， 在 “示例 页 ”列表 框 中 选 
择 “ 上 方 固定 ， 左 侧 谋 套 ”框架 集 ， 单 击 C 开 名] 按钮 ， 如 图 5-15 所 示 。 
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图 5-15 “新 建文 档 ” 对 话 框 
步 又 3 在 弹出 的 “框架 标签 辅助 功能 属性 ”对 话 框 中 可 对 框架 及 框架 集 的 “标题 ” 
属性 进行 设置 ， 通 常 保持 默认 设置 不 变 ， 单 击 忆 枉 ] 按 钮 ， 如 图 5-16 所 示 。 
步 又 4 返回 到 编辑 窗口 后 , 即 可 查看 制作 的 框架 , 制作 的 框架 最 终 效果 如 图 5-17 所 示 。 


5-17 制作 的 框架 最 终 效 果 


图 5-16 “框架 标签 辅助 功能 属性 ”对 话 框 


”魔法 档案 
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2.， 直 接 创建 预定 义 框架 集 


加 载 预定 义 框架 集 是 指 在 已 有 的 页 面 加 载 框架 集 ， 页 面 中 的 内 容 将 保留 在 框架 集中 的 
某 个 框架 中 。 下 面 以 在 网 页 中 加 载 “ 上 方 和 下 方 框架 ”框架 集 为 例 进行 讲解 ， 具 体操 作 


如 下 : 


步骤 1 新 建 一 个 网 页 ， 选择“ 布局 ”选项 卡 ， 单 击 回 "后 的 加 按钮 ， 在 弹出 的 下 拉 
菜单 中 选择 “上 方 和 下 方 框架 ”命令 ， 如 图 5-18 所 示 。 
在 弹出 的 “框架 标签 辅助 功能 属性 ”对 话 框 中 ， 单 击 C 台 一 按钮 完成 加 载 预 


a 如 图 5 5-19 所 示 。 
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5-18 选择 框架 命令 5-19 “框架 标签 辅助 功能 属性 ”对 话 框 


步骤 3 返回 到 编辑 窗口 后 ， 即 可 查看 制作 的 框架 。 


”魔法 档案 
| 在 实际 的 应 用 中 ， 可 以 根据 需要 创建 谋 套 的 框架 集 , 创建 谋 套 框架 十 分 简单 ， 将 扎 标 停留 
在 


网 页 需要 再 次 嵌 套 的 框架 处 ， 选 择 “ 框 架 集 ”命令 ， 即 可 创建 出 嵌 套 框架 集 。 


5.3.2 ”编辑 框架 

框架 集 创 建 后 , 未必 能 符合 用 户 的 需求 ， 难 免 会 对 框架 进行 修改 , 如 对 框架 进行 拆 分 、 
合并 及 删除 等 操作 。 

1 选择 框架 

对 框架 进行 编辑 ， 首 先 要 选择 所 需 的 框架 。 在 Dreamweaver CS3 中 选择 框架 的 方法 有 


CR 
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两 种 ， 分 别 介绍 如 下 : 
党 在 编辑 窗口 中 选择 框架 : 在 编辑 窗口 中 选择 框架 的 操作 比较 简单 ， 按 住 【Alt] 键 
不 放 ， 在 所 需 的 框架 内 单 击 即 可 选中 该 框架 ， 被 选中 的 框架 边框 将 显示 为 虚线 ， 
如 图 5-20 所 示 。 
党 ”在 “框架 ”面板 中 选择 框架 : 在 “框架 ”面板 中 要 选择 的 框架 上 单 击 即 可 选中 该 
框架 。 被 选中 的 框架 四 周 有 粗 黑色 的 边框 ， 如 图 5-21 所 示 。 


人 | 


图 5-20 在 编辑 窗口 选择 框架 图 5-21 在 “框架 ”面板 选择 框架 


2.， 选 择 框架 集 


对 框架 进行 编辑 ， 难 免 会 选择 框架 集 ， 框 架 和 框架 集 密 不 可 分 。 选 择 框架 集 的 方法 有 
两 种 ， 分 别 介绍 如 下 
党 ”在 编辑 窗口 中 选择 框架 集 : 单 击 需要 选中 的 框架 集 边 框 即 可 ， 选 中 的 框架 集 包含 
的 所 有 框架 边框 均 呈 现 虚 线 ， 如 图 5-22 所 示 。 
党 ”在 框架 面板 中 选择 框架 集 : 在 “框架 ”面板 中 单 击 包含 要 选择 框架 集 的 外 边框 即 
可 ， 被 选中 的 框架 集 以 黑色 粗 框 显示 ， 如 图 5-23 所 示 。 


上 3 


图 5-22 在 编辑 窗口 中 选择 框架 集 图 5-23 在 “框架 ”面板 中 选择 框架 集 
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3.， 调整 框架 大 小 


创建 的 框架 集 网 页 ， 最 开始 通常 不 符合 要 求 ， 一 般 都 需要 根据 框架 中 的 显示 情况 进行 
调整 。 下 面 以 “调整 左 侧 框架 ”为 例 介绍 调整 方法 ， 具 体操 作 如 下 : 

步 又 1 在 打开 的 编辑 窗口 中 ， 打 开 要 调整 大 小 的 框架 网 页 ， 在 浏览 器 中 浏览 该 网 页 
时 发 现 左 侧 的 页 面 显示 不 完全 。 

步 又 2 按 【Alt] 键 , 选择 左边 框架 ， 然 后 选择 【查看 】/【 可 视 化 助理 】/【 框 架 边 
框 】 命 令 显示 框架 边框 。 

步骤 3 ”将 鼠标 光标 移 至 需 调 整 大 小 的 框架 边框 上 ， 此 时 鼠标 光标 变 为 + 形状 ， 如 
图 5-24 所 示 。 

步 又 4 按 住 鼠标 左 键 不 放 向 右 拖 动 ， 使 “武侠 小 说 ”图 片 完全 显示 出 来 后 释放 鼠标 
即 可 ， 如 图 5-25 所 示 。 
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图 5-24 调整 前 的 框架 图 5-25 调整 后 的 框架 
步骤 5 按 全 浏览 完全 显示 的 网 页 效果 ， 如 图 5-26 所 示 。 
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5-26 浏览 完全 显示 的 网 页 效果 
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4. 拆 分 框架 


在 编辑 框架 网 页 的 过 程 中 ， 有 时 需要 对 预定 义 框架 进行 拆 分 ， 才 能 达到 要 求 ， 如 将 一 
个 框架 拆 分 为 两 个 或 者 更 多 的 框架 。 下 面 以 将 “上 方 固定 ， 左 侧 嵌 套 ” 预 定义 框架 中 下 部 
拆 分 为 3 个 框架 为 例 进 行 讲解 ， 具 体操 作 如 下 : 

秒 又 1 在 打开 的 编辑 窗口 中 ， 选 择 要 进行 拆 分 的 框架 ， 如 图 5-27 所 示 。 

步骤 2 ”将 鼠标 光标 移动 到 选中 框架 边框 线 上 直到 鼠标 光标 变 为 4 形状 ， 如 图 5-28 

所 示 。 


呈 
将 鼠标 停留 此 处 


图 5-27 选择 框架 -28 ”做 好 拖 动 的 准备 


步 又 3 按 住 【Alt] 键 的 同时 拖 动 鼠标 至 合适 位 置 后 释放 鼠标 ， 再 释放 【Alt] 键 ， 
完成 框架 的 拆 分 ， 如 图 5-29 所 示 。 


5-29 ” 拆 分 框架 


， 魔力 测试 
| 新 建 “ 下 方 固定 ， 右 侧 嵌 套 ”预定 义 框架 ， 然 后 将 上 部 拆 分 为 3 个 框架 。 
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5. 删除 框架 


当 不 需要 某 个 框架 时 ， 可 以 将 其 删除 ， 其 方法 十 分 简单 ， 用 鼠标 将 需要 删除 的 边框 线 
拖 出 页 面 即 可 。 


5.3.3 ”保存 框架 以 及 框架 集 


完成 框架 制作 后 , 需要 对 其 框架 和 框架 集 进行 保存 , 保存 的 方法 与 其 他 网 页 有 所 

下 面 以 保存 一 个 “顶部 框架 与 嵌 套 的 左 部 框架 ”为 例 ， 具 体操 作 如 下 : 

步 又 1 选择 【文件 ] 代 保存 全 部 了 命令 , 将 会 弹出 “另存 为 ”对 话 框 , 在 Dreamweaver 
CS3 中 出 现 虚 线 框 , 第 一 个 是 保存 的 框架 集 网 页 , 选择 好 存储 的 位 置 , 在 “ 保 
存在 ”下 拉 列 表 框 中 输入 保存 地 址 ， 再 在 “文件 名 ”下 拉 列 表 框 中 输入 文件 
名 ， 如 “kj.html”， 单 击 CS 按钮， 如 图 5-30 所 示 。 


图 5-30 保存 框架 集 


区 别 。 


步骤 2 当 完 成 框架 集 的 网 页 保存 后 ， 现 在 要 保存 各 个 框架 网 页 ， 用 户 将 根据 虚线 框 


确定 保存 的 那 一 部 分 框架 ， 如 这 里 程序 自动 选择 右 下 角 ， 在 “另存 为 ” 


对 话 


框 中 , 选择 保存 文件 的 路 径 和 输入 文件 名 , 这 里 输入 “main.html”, 单 击 Cezs] 


按钮 ， 如 图 5-31 所 示 。 


步骤 3 ”接着 弹出 一 个 “另存 为 ”对 话 框 ， 要 求 保存 其 他 的 网 页 文档 ， 用 虚线 框框 住 
需 保存 的 左边 框架 ， 在 对 话 框 中 输入 文件 名 “lefthtml”， 单 击 LEE@ 按钮 


将 其 保存 ， 如 图 5-32 所 示 。 


秒 又 4 用 相同 的 方法 保存 顶部 框架 ， 将 其 命名 为 “top html”， 单 击 LEES | 按钮 即 


可 完成 保存 所 有 框架 集 和 框架 页 面 的 操作 。 


> 车 
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图 5-31 保存 右 下 角 的 框架 5-32 保存 左下 角 的 框架 


这 魔法 档案 

框架 集 页 面 的 命名 问题 十 分 重要 ， 大 家 要 尽量 遵循 网 页 的 命名 规则 ， 其 次 框架 网 页 一 般 
都 是 以 框架 集 网 页 显示 出 来 的 ， 框 架 网 页 只 需要 制作 出 在 框架 集 网 页 显示 出 的 大 小 即 可 ， 如 图 5-32 
所 示 的 left 网 页 ， 它 只 需要 制作 如 图 5-30 所 示 的 虚线 框 的 大 小 即 可 ， 以 左上 角 为 起 点 。 


5.4 典型 实例 一 一 布局 个 人 网 页 


本 章 主要 讲解 了 用 各 种 方式 布局 网 页 ， 这 里 我 们 来 布局 一 个 个 人 网 页 ， 网 页 的 首页 用 
Div+CSS 的 方式 来 布局 ， 对 于 内 页 则 采用 框架 来 布局 。 


5.4.1 用 层 布 局 个 人 网 站 首页 


个 人 网 站 的 首页 一 般 是 普通 网 页 , 凡是 普通 网 页 都 适用 于 用 层 布 局 , 规划 页 面 的 内 容 ， 
具体 操作 如 下 : 

步 又 1 启动 Dreamweaver CS3， 新 建 一 个 网 页 ， 选 择 “ 布 局 ”选项 卡 ， 单 击 “绘制 
AP Div” 按 钮 熏 ， 如 图 5-33 所 示 。 

步 又 2 在 打开 的 编辑 窗口 中 任意 绘制 一 块 区 域 ， 将 完成 顶部 区 域 的 布局 ， 如 图 5-34 
所 示 。 

步骤 3 其实 这 样 并 没有 完成 操作 ， 还 需要 修改 ， 单 击 喇 f 吕 按钮， 转换 成 代码 视图 ， 
这 里 要 对 CSS 样式 的 名 称 进行 修改 ， 如 将 “apDiv1” 修 改 成 其 他 名 称 ， 这 里 
将 其 修改 成 “top” 。 


万 | 


> 新 手 学 做 网 站 


5-33 ” 单 击 “绘制 AP Div” 按 钮 5-34 ”绘制 第 一 个 层 


步 又 4 按照 相同 的 方法 ， 绘 制 出 其 他 层 ， 绘 制 完成 后 ， 在 各 个 区 域 输入 注释 文字 ， 
如 图 5-35 所 示 。 


步 又 5 选择 【窗口 〗/【AP 元 素 】 命 令 打 开 “AP 元 素 ” 面 板 ， 双 击 每 一 层 ， 然 后 
为 层 命名 ， 将 所 有 Z 的 值 修改 为 1， 如 图 5-36 所 示 。 


图 5-35 布局 好 的 结构 图 5-36 修改 后 的 “AP 元 素 ”面板 


5.4.2 用 框架 布局 个 人 书屋 


个 人 书屋 的 页 面 与 其 他 页 面 不 同 , 它 有 一 部 分 内 容 是 固定 不 变 的 , 改变 的 只 是 一 部 分 ， 
建议 使 用 框架 布局 ， 这 样 方便 浏览 者 浏览 ， 具 体操 作 如 下 : 
步 又 1 在 文件 面板 上 右 击 , 在 弹出 的 快捷 菜单 中 选择 “新 建文 件 夹 "命令, 如 图 5-37 
所 示 。 


A 


‘9 
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步骤 2 在 面板 上 ， 将 新 文件 来 命名 为 “book”， 如 图 5-38 所 示 。 


文件 | 了 文件 后 
Drysite 六 | | 本 地 视图 辐 本 地 视图 “ 状 
名 C8 个 洲 色 食 | 加 名 C8 介 信 名 全 | 加 


| ， 
本 可 
图 5-37 选择 “新 建文 件 夹 ”命令 图 5-38 重 命名 文件 夹 

步骤 3 新 建 一 个 网 页 ， 选 择 “ 布 局 ”选项 卡 ， 单 击 圆 - 后 的 国 按 钮 ， 在 弹出 的 下 拉 
菜单 中 选择 “上 方 和 下 方 框架 ”命令 。 

步 又 4 在 弹出 的 “框架 标签 辅助 功能 属性 ”对 话 框 中 ， 单 击 书 枉 按 钮 完成 加 载 巴 
定义 框架 集 的 操作 ， 如 图 5-39 所 示 。 

步 又 5 选择 【文件 】/【 保 存 全 部 】 命 令 ， 弹 出 “另存 为 ”对 话 框 ， 将 文件 保存 在 新 

建 的 “book” 文 件 夹 下 ， 第 一 个 文件 名 为 “book.html”， 单 击 [本 名] 按钮 ， 

用 同样 的 方法 保存 框架 ， 依 次 将 其 命名 为 “mainhtml”、 “left.html” 和 

\geren\ ) 。 


i 
回 启 | 多 园 吕 已 | 里 兮 守 镑 半 回 目 -| 台 


5-39 “框架 标签 辅助 功能 属性 ”对 话 框 5-40 ”框架 布局 最 终 效果 


5.5 常见 问题 解答 


A. 魔法 师 ， 层 布局 了 网 页 ， 是 不 是 网 页 就 一 定 不 能 用 表格 了 ? 

£. 这 种 想法 是 不 对 的 。 表 格 有 它 的 作用 ， 它 是 用 来 表示 数据 的 工具 ， 网 页 自然 离 不 开 
数据 ， 用 表格 来 表达 数据 理所当然 ， 如 工资 表 ， 没 有 表格 是 难以 表达 清楚 的 。 另 外 
如 表单 ， 它 是 用 来 输入 数据 的 窗口 ， 用 表格 固定 其 表单 元 素 是 理智 的 选择 。 


及: 魔法 师 ， 框 架 布局 网 页 和 层 布局 网 页 有 什么 区 别 ? 
S 
LE 


As : 一 般 用 层 布局 网 页 的 时 候 比较 多 ， 框 架 布局 网 页 应 用 得 比较 少 ， 它 一 般 用 于 分 类 多 
的 网 站 ， 如 课件 网 站 ， 还 有 后 台 管 理 的 网 站 。 


5.6 过 关 练 习 


(1) 用 层 布 局 一 个 如 图 5-41 所 示 的 页 面 光盘 :\ 最 终 效 果 \ 第 5 章 \ 布 局 .html) 。 
(2) 用 框架 布局 一 个 如 图 5-42 所 示 的 页 面 〈 光 盘 :\ 最 终 效果 \ 第 5 章 \ 框 架 \) 。 


图 5-41 用 层 布局 的 网 页 图 5-42 用 框架 布局 的 网 页 


A 


设计 网 页 中 的 文字 


添加 网 页 文本 
设置 文本 的 起 链接 
让 文本 更 具 个 性 


典型 实例 一 一 个 人 新 闻 页 的 设 ;i 


魔法 师 : 


小 魔女 : 
魔法 师 : 


小 魔女 : 


色 乡 媒体 教学 演示 : 23 分 名 


: 怎么 了 小 和 魔女， 又 遇 到 什么 难 


题 了 吗 ? 


: 前 面 一 章 不 是 进 了 布局 吗 ? 所 


以 我 就 想 在 板块 里 设计 文字 ， 

谁 知 我 怎么 也 输入 不 了 空格 ， 

这 是 怎么 一 回 事 ? 

小 问题 ， 看 看 魔法 师 的 厉害 ， 

怎么 样 ? 行 了 吧 ! 

魔法 师 ， 您 是 怎么 做 到 的 呢 ? 

空格 键 在 网 页 中 属于 特殊 字符 ， 

需要 插入 ,这 一 章 ， 将 详细 讲 
网 页 中 的 文字 的 添加 以 及 格 

式 设 置 , 记 住 , 小 魔女 , 一 定 要 

认真 听 哟 。 

嗯 ， 我 都 拿 出 笔记 本 了 ， 就 等 

你 讲解 呢 。 


Sa 法 
‘4 新 手 学 做 网 站 上 


6.1 添加 网 页 文本 


文字 是 网 页 中 必 不 可 少 的 元 素 ， 也 是 运用 最 为 广泛 的 元 素 之 一 ， 通 过 它 传递 信息 是 其 
他 任何 一 种 网 页 元 素 无 法 蔡 代 的 ， 从 某 种 意义 上 说 文字 是 网 页 存在 的 基础 。 


6.1.1 一 般 文本 的 添加 


在 Dreamweaver CS3 中 为 网 页 添加 一 般 文本 的 方法 和 在 其 他 软件 (如 记事 本 、Word) 
中 添加 一 样 ， 常 用 的 有 两 种 方法 ， 分 别 介 绍 如 下 : 
学 ”直接 输入 文本 : 将 光标 插入 点 定位 在 需 添加 文本 的 位 置 ， 打 开 所 需 的 输入 法 直接 
输入 文本 。 如 图 6-1 所 示 为 正在 输入 的 文本 。 
党 ”从 其 他 文档 中 复制 文本 : 在 其 他 文档 中 选中 需 复制 的 文字 ， 按 【CtrltC】 键 将 
其 复制 到 剪贴 板 ， 将 光标 定位 到 网 页 中 需 添加 文本 的 位 置 ， 按 【CtrltV】 键 粘贴 


6-1 输入 文字 


6.1.2 ”特殊 字符 的 添加 


在 Dreamweaver CS3 中 编辑 文本 时 ， 有 许多 字符 是 无 法 通过 键盘 输入 的 ， 如 注册 符号 
@、 版 权 符 号 O 和 商标 % 等 。 下 面 以 插入 “商标 mx ”为 例 进行 讲解 ， 具 体操 作 如 下 : 
步 又 1 将 光标 插入 点 定位 到 所 需 位 置 。 
步 又 2 选择 “文本 ”选项 卡 ， 将 出 现 文本 的 许多 工具 ， 如 图 6-2 所 示 。 
“插入 常用 | 布局 | 表单 ”数据 | spry 文本 收藏 天 
BI|S emg tymh hh ol fid dt dd | mc| WD- 
图 6-2 “文本 ”选项 卡 
步 又 3 单 击 噶 "按钮 弹出 如 图 6-3 所 示 的 下 拉 菜 单 ,选择 所 需 的 符号 即 可 , 如 商标 。 


一 学 玖 会 民 渗 书简 


. 
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到 - 


~ 遇 换行 符 Shift + Enter) 
3 
ey 志 不 换行 空格 
小 魔女 ， 你 也 可 以 通过 选 在 引 生 
~ 9 有 引号 
择 【[ 插 入 记录 】/ THTML】 一 破 折 内 
/ 【特殊 字符 】/【 商 标 】 命 上 上 英镑 符号 
令 ， 插 入 商标 特殊 符号 。 才 欧元 符号 
单 日 元 符号 
S00 加 版 权 
加 注册 商标 
加 Ee 
图 6-3 选择 特殊 符号 


WwW 魔法 档案 
| 如 果 “ 文 本 ”工具 栏 被 浮动 面板 挡住 了 一 部 分 ， 可 以 将 浮动 面板 暂时 隐藏 


6.1.3 在 字符 间 添 加 空格 


在 网 页 中 添加 文本 的 时 候 ， 或 许 有 读者 按 了 很 多 次 的 空格 键 ， 却 出 现 一 个 空格 ， 出 现 
这 种 情况 的 原因 是 Dreamweaver CS3 中 的 文档 格式 都 是 以 HTML 的 形式 存在 的 ,而 HTML 
文档 只 允许 字符 间 有 一 个 空格 ， 如 果 要 在 文档 中 添加 多 个 空格 可 单 击 “ 文 本 ” 栏 的 蜡 - 按 
钮 ， 选 择 “ 不 换行 空格 ”命令 ， 需 要 几 个 空格 ， 就 选择 几 次 。 也 可 以 选择 【插入 记录 】/ 
【HTML】/【 特 殊 字 符 】/【 不 换行 空格 】 命 令 为 网 页 文本 添加 空格 。 


A 人 
» 府 法 抽 我 习 避 了 用 作 当然 可 以 了 , 按 [caitshit 
输入 空格 , 在 网 页 中 可 不 + 空格 键 季 可 在 文档 中 添 


新 建 一 个 网 页 ， 然 后 在 网 页 中 添加 4 个 空格 键 ， 再 随意 输入 文本 ， 最 后 将 其 保存 。 


4 | “可 以 用 键入 输入 ? 
WIN » 加 空格 。 
忆 i > 和 a | 
i 魔力 测试 
EE | 
| 


6.1.4 水 平 线 的 插入 
在 网 页 中 文本 和 对 象 都 比较 多 ， 有 时 为 了 美观 ， 可 用 水 平 线 将 其 分 隔 开 来 ， 使 用 段落 


名 


六 学 束 会 谨 法 旨 


As 法 
经 新 手 学 做 网 站 党 


区 分 更 明显 。 
1.， 添加 水 平 线 


在 编辑 窗口 中 将 光标 插入 点 定位 到 所 需 位 置 ， 选择 【插入 记录 】/【HTML)】/【 水 平 线 】 
命令 即 可 添加 水 平 线 。 也 可 将 “插入 ” 栏 切换 到 “HTML” 插入 栏 , 单 钮 添加 水 平 
线 。 如 图 6-4 所 示 为 在 网 页 中 添加 的 一 条 水 平 线 。 


泰文 尔 
水 T 线 将 二 
标题 和 正 泰 站 尔 出 生 于 印度 加 尔 各 答 一 个 受到 良好 教育 的 富裕 家 庭 ， 他 的 父亲 是 一 


文 分 开 位 地 方 的 印度 教 宗教 领袖 。 在 外 国 ， 泰 戈 尔 一 般 被 看 作 是 一 位 诗人 ， 而 很 少 被 看 
做 一 位 哲学 家 ， 但 在 印度 ， 这 两 者 往往 是 相同 的 。 在 他 的 诗 中 含有 深刻 的 宗教 和 
哲学 的 见解 。 对 泰戈尔 来 说 ， 他 的 诗 是 他 奉献 给 神 的 礼物 ， 而 他 本 人 是 神 的 求婚 
者 。 他 的 诗 在 印度 享有 史诗 的 地 位 。 他 本 人 被 许多 印度 教徒 看 作 是 一 个 圣人 。 除 
诗 外 泰戈尔 还 写 了 小 说 、 小 品 文 、 游 记 、 话 剧 和 2000 多 首 歌曲 。 他 的 诗歌 主要 
是 孟加拉 语 写成 的 ， 在 孟加拉 语 地 区 ， 他 的 诗歌 非常 普及 。 


图 6-4 网 页 中 的 水 平 线 


2.， 修改 水 平 线 


默认 的 水 平 线 可 能 满足 不 了 用 户 的 要 求 ， 当 用 户 在 网 页 中 添加 了 水 平 线 以 后 ， 还 可 以 
对 其 进行 修改 。 修 改 水 平 线 的 方法 是 : 选中 要 修改 的 水 平 线 ， 此 时 “属性 ”面板 如 图 6-5 
所 示 。 在 “ 宽 ” 和 “高 ”文本 框 中 可 设置 水 平 线 的 宽度 和 高 度 值 ， 在 “对 齐 ” 下 拉 列 表 框 
中 设置 水 平 线 的 对 齐 方式 ， 如 左 对 齐 、 居 中 对 齐 、 右 对 齐 等 ， 选中 回 阴影 名 复 选 框 ， 可 为 水 
平 线 添加 阴影 效果 。 
rv 属性 


访 ** 守 | 侵 来 出 HF [A 闭关 无 加 
| 珊 回 阴影 


区 济 


ra 图 6-5 “属性 ”面板 


| ”魔法 档案 
可 以 用 图 形 软件 制作 一 些 独 具 特色 的 矩形 条 , 然后 用 插入 图 形 的 方法 插入 到 页 面 中 作为 水 
平 线 使 用 ， 这 样 可 使 水 平 线 的 形状 更 加 丰富 。 


6.1.5 日 期 的 添加 


在 Dreamweaver CS3 中 可 方便 地 插入 当前 日 期 或 时 间 ， 其 方法 是 : 将 光标 插入 点 定位 
到 所 需 位 置 ， 选 择 【 插 入 记录 】/【 日 期 ] 命令 ,弹出 “插入 日 期 ”对 话 框 ， 如 图 6-6 所 示 。 


并 


区- 


1 
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垃 


在 其 中 可 设置 星期 格式 、 日 期 格式 和 时 间 格式 。 选中 回 f 竺 时 和 二 间 新 " 复 选 框 可 在 每 次 保存 文 
档 时 都 更 新 插入 的 日 期 。 完成 设置 后 单 击 对 话 框 中 的 C 本 按钮 关闭 对 话 框 即 可 。 如 图 6-7 
所 示 为 添加 了 日 期 时 间 的 网 页 。 


星期 格式 星 央 四 ， 加 | 
EN 一 志 
3/7/74 
Dd 之 
时 间 格式 :|2:9 阅 
器 [全 看 时 自动 更 机 
天 j 时 加， 2008 秆 6 月 27| 10:35 
图 66 “插入 日 期 ”对 话 框 图 6-7 网 页 中 插入 的 日 期 和 时 间 


】” 度 法 档案 各 
将 “插入 ” 栏 切换 到 “常用 ”工具 栏 ， 5 魔力 测试 
单 击 “插入 日 期 ”按钮 关 也 可 弹出 “插入 日 期 ” 新 建 一 个 网 页 , 试 试 如 何在 网 页 中 添加 
对 话 框 。 水 平 线 和 插入 当前 时 间 。 


6.1.6 ”网 页 中 文本 的 换行 与 分 段 


在 网 页 中 文本 换行 可 按 【ShifttEnter】 键 ， 也 可 选择 【插入 】/【HTML】/【 特 殊 字符 】/ 
【换行 符 】 命 令 ， 分 段 可 直接 按 【Enter】 键 ， 它 们 之 间 的 区 别 在 于 ， 换 行 行距 小 一 些 ， 分 段 
行距 大 一 些 。 


6.2 设置 文本 的 超 链 接 


“ 超 链接 ”这 个 词语 ， 也 许 大 家 并 不 陌生 ， 它 是 另 一 个 网 页 或 者 其 他 对 象 的 入 口 ， 通 
过 它 可 以 将 整个 网 站 或 者 整个 nternet 连接 成 一 个 整体 。 


6.2.1 创建 文本 一 般 超 链接 


一 般 超 链接 按 路 径 分 为 绝对 超 链 接 和 相对 超 链接 ， 前 者 是 针对 整个 Intemet 的 链接 ， 
后 者 是 本 站 之 间 的 网 页 链接 。 下 面 以 创建 相对 超 链接 为 例 进行 讲解 ， 具 体操 作 如 下 : 
步骤 1 选择 需 添加 超 链接 的 文本 。 
步 又 2 单 击 “ 属 性 ”面板 中 “ 超 链 接 ” 下 拉 列 表 框 后 的 已 按钮 ， 如 图 6-8 所 示 ， 强 
出 “选择 文件 ”对 话 框 ， 如 图 6-9 所 示 ， 在 该 对 话 框 的 “查找 范围 ”下 拉 列 
表 框 中 选择 所 需 文档 保存 的 位 置 ， 然 后 选择 所 需 的 文档 。 
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En 


小 魔女 ， 创 建 绝对 超 连接 的 
方法 也 很 简单 ， 直 接 在 “ 链 
Ey 


Wi、 


dD @ 
3D 5 


上 
图 6-8 选择 需要 链接 的 文字 图 6-9 “选择 文件 ”对 话 框 
步 又 3 在 “相对 于 ”下 拉 列 表 框 中 选择 “文档 ”选项 ， 为 文档 添加 相对 超 链接 。 
步骤 4 单 击 已 蚂 按钮 关闭 对 话 框 ， 在 “属性 ”面板 的 “目标 ”下 拉 列 表 中 选择 超 
链接 网 页 打开 的 方式 ， 如 图 6-10 所 示 。 至 此 ， 超 链接 创建 完成 。 
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1 了 属性 
格式 无 ”加 械 [ 无 司 CES Je 7 至 笃 委 三 。 包 六 [indw hal oD 8 
字体 | 默认 字体 国 。 大 小 无 ”加 器 王 生 旺旺 ”目标 | 加 
3 
图 6-10 “属性 ”面板 


i 魔法 档案 
“属性 ”面板 中 的 “目标 ”下 拉 列 表 中 有 _blank、_parent _self 和 top 4 个 选项 ， 其 含义 


介绍 如 下 : 


os 
人 


_blank 表示 单 击 该 超 链 接 会 重新 启动 一 个 浏览 器 窗口 载 入 被 超 链接 的 网 页 。 
_parent 表示 在 上 一 级 浏览 器 窗口 显示 超 链接 网 页 文档 。 

_self 表示 在 当前 浏览 器 窗口 中 显示 被 链接 的 网 页 文档 。 

_top 表示 在 最 顶端 的 浏览 器 窗口 中 显示 链接 的 网 页 文档 。 
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6.2.2 ”邮箱 超 链接 
创建 邮箱 超 链接 的 方式 有 两 种 ， 一 种 是 通过 “常用 ”工具 栏 创建 超 链接 ， 另 一 种 是 通 


过 “属性 ”面板 创建 超 链接 。 
1， 通 过 “常用 ”工具 栏 创建 超 链接 
通过 “常用 ”工具 栏 创建 超 链接 ， 具 体操 作 如 下 : 


步 又 1 选择 要 作为 电子 邮件 链接 的 对 象 。 
步 又 2 ”在 “常用 ”工具 栏 中 单 击 回 按钮 ， 弹 出 “电子 邮件 链接 ”对 话 框 。 


并 
ea/ 第 6 章 设计 网 页 中 的 文字 碎 法 书 


步 又 3 在 该 对 话 框 的 “文本 ”文本 框 中 会 自动 显示 选择 的 文本 内 容 ， 在 “E-mail” 
文本 框 中 输入 要 链接 的 邮箱 地 址 ， 如 图 6-11 所 示 。 

步骤 4 设置 完成 后 单 击 [ 本] 按钮 关闭 对 话 框 完成 电子 邮件 超 链接 的 创建 此 时 ， 

“属性 ”面板 中 的 “ 超 链接 ”下 拉 列 表 框 中 变 为 超 链接 的 邮箱 地 址 。 


i ~ 


和 小 魔女 ， 通 过 选择 【插入 记录 3/ 
【电子 邮件 链接 】 命令 ， 也 可 弹 
出 “电子 邮件 链接 ”对 话 框 。 


i 


六 :5 | 


了 -ail: [tanranjvnal26 con | 


图 6-11 “电子 邮件 链接 ”对 话 框 


2， 通 过 “属性 ”面板 链接 


这 种 方法 很 简单 ， 选 择 需要 链接 的 文本 ， 然 后 在 “链接 ”下 拉 列 表 框 中 输入 “mailto: 
邮箱 地 址 ” 即 可 ， 如 “mailto:tanzunjun@126.com”。 


6.3 让 文本 更 具 个 性 


文本 是 网 页 中 最 重要 的 内 容 ， 如 果 网 页 中 的 文本 样式 太 单调 ， 则 会 大 大 降低 网 页 的 外 
观 效果 ， 我 们 可 以 通过 对 网 页 文本 格式 的 设置 使 文本 更 加 美观 ， 让 网 页 更 具 魅 力 。 


6.3.1 通过 “属性 ”面板 设置 文本 格式 


在 “属性 ”面板 中 ， 可 以 设置 文本 的 字体 、 大 小 、 加 粗 等 一 系列 的 格式 ， 具 体操 作 如 下 : 

步骤 1 新 建 一 个 网 页 , 通过 布局 绘制 一 个 Div, 在 “CSS 样式 ”面板 里 , 将 “Ap div1” 
命名 为 “weiyi”， 然 后 在 层 中 输入 文字 ， 如 图 6-12 所 示 。 

步骤 2 选择 所 有 的 文字 , 在 “字号 ”下 拉 列 表 中 选择 “18” 号 ; 单 击 “ 加 粗 ” 按 钮 也 ， 
将 字体 加 粗 ; 单 击 “颜色 ”按钮 ， 在 弹出 的 列表 中 选择 “红色 ”， 或 者 在 后 
面 的 列表 框 中 输入 “#CC0000”。 

步骤 3 选择 文本 “ 摸 鱼 儿 一 雁 印 词 ”， 在 “属性 ”面板 中 设置 用 户 喜 欢 的 格式 ， 用 
同样 的 方法 ， 选 择 文本 “元 好 问 ”， 将 字体 设置 成 “18”、 加 粗 ， 制 作 完 成 
后 效果 如 图 6-13 所 示 。 


a 魔法 档案 

通过 “属性 ”面板 设置 字体 、 字 号 、 颜 色 等 属性 时 网 页 代码 容易 亲 乱 ， 宛 余 代 码 偏 多 ， 
制作 简单 网 页 的 用 户 可 用 此 方法 ， 因 为 它 的 代码 偏 少 ， 不 用 考虑 过 多 的 情况 。 对 于 大 篇 幅 的 网 页 此 
方法 不 是 最 合理 的 ， 在 下 一 节 中 ， 将 讲解 更 优秀 的 设置 方法 。 
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图 6-12 输入 文本 图 6-13 设置 文本 


6.3.2 ”设置 优秀 的 网 页 文本 格式 


6.3.1 节 中 所 讲解 的 格式 设置 方法 ， 实 际 上 它 也 自动 生成 CSS 代码 ， 但 是 那样 代码 会 
偏 多 , 设置 一 次 , 就 会 增加 几 行 CSS 代码 , 而 且 样 式 名 都 是 默认 的 , 不 易 辨 认 。 通 过 “CSS 
样式 ”面板 设置 文本 格式 可 以 让 代码 规范 ， 减 少 元 余 代 码 ， 便 于 管理 。 具 体操 作 如 下 : 
步 桑 1 新 建 一 个 网 页 ， 通过 布局 绘制 一 个 Div, 然后 在 “CSS 样式 ”面板 里 , 将 “Ap 
divl” 命 名 为 “ceng”， 然 后 在 层 中 输入 文字 。 

步 又 2 在 “CSS 样式 ”面板 里 选择 “ceng” 样 式 ， 右 击 选择 命令 ， 在 “CSS 规则 定 
义 ” 对 话 框 中 设置 背景 为 “黑色 ”， 字 体 颜 色 为 “白色 ”， 字 号 为 “16 号 ”， 
字体 设置 为 “黑体 ”， 设 置 完成 后 ， 单 击 C 能 按钮， 如 图 6-14 所 示 。 


A 
小 魔女 , 正文 是 层 中 放 得 
比较 多 的 对 象 , 可 将 格式 
设置 在 层 的 Css 样式 中 。 
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图 6-14 设置 格式 
步骤 3 选择 文本 “匆匆 ”， 选 择 “ 文 本 ”选项 卡 ， 单 击 “ 标 题 1” 按 钮 岂 ， 字 体 将 
自动 增 大 ， 单 击 “属性 ”面板 中 的 “居中 ”按钮 笃 ， 如 图 6-15 所 示 。 


让 


a 
| 第 6 章 。 设计 网 页 中 的 文字 状 法 蔬 


有 默认 的 标题 样式 ， 需 8 交 9 

要 它 的 时 候 ， 只 需 选 择 nn 
文字 ， 单 击 相应 的 按钮 
即 可 。 


置 为 相同 的 颜色 , 可 为 其 新 
建 一 个 css 样式 ， 然 后 将 
它 调 入 <h1> 标 签 里 。 


加 丘 玩 
eC 


图 6-15 设置 后 的 效果 
步 驿 4 设置 完成 将 其 保存 ， 得 到 最 终 效果 (光盘 :\ 最 终 效果 \ 第 6 章 \ 文 字 .html ) . 


: s 魔法 档案 

设置 完成 后 ， 用 户 如 需 对 文字 的 属性 进行 设置 ， 可 在 “属性 ”面板 中 进行 。 在 HIML 代 
码 中 ， 一 般 放 在 首 标 签 里 ， 如 <hl align="center" >，“center” 是 居中 ，“]left” 是 左 对 齐 ，“right” 是 右 
对 齐 ，“align="justify"”” 是 两 端 对 齐 ， 用 户 在 “属性 ”面板 中 设置 了 相应 的 对 齐 方式 ，align 的 值 会 发 
生 相 应 的 更 改 。 


6.4 典型 实例 一 一 一 个 新 闻 页 的 设计 


本 章 学 习 了 设计 网 页 的 文字 、 文 字 的 单独 格式 、 文 字 的 段落 ， 实 际 上 是 学 习 文 字 在 页 
面 中 的 排版 。 文 字 在 网 页 中 的 排版 是 基于 布局 的 ， 只 有 布局 完成 后 ， 设 置 的 文字 格式 才 有 
意义 。 布 局 相当 于 网 页 的 必要 容器 ， 而 文字 是 放 在 容器 中 的 一 个 常用 对 象 。 在 网 站 中 新 闻 
排版 是 非常 有 用 的 文字 排版 模式 ， 大 多 数 网 站 都 离 不 开 它 ， 通 过 新 闻 排 版 的 扩展 ， 几 乎 涉 
及 到 网 页 排版 的 所 有 方法 ， 足 以 让 初学 者 解决 网 页 中 的 文字 格式 问题 ， 最 终 效果 如 图 6-16 
所 示 〈 光 盘 :\ 最 终 效果 \ 第 6 章 mewshtml) 。 
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图 6-16 最 终 效果 

具体 操作 如 下 : 

步骤 1 打开 “news.html” 文 档 (光盘 :\ 素 材 \ 第 6 章 mews.html) ， 选 择 “CSS 样式 ” 
面板 中 的 “ceng” 样 式 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “编辑 ”命令 ， 如 
图 6-17 所 示 。 

步 又 2 在 “分 类 ”列表 框 中 选择 “类 型 ” 选项, 在 “大 小 ”下 拉 列 表 框 中 选择 “14”， 
单 击 忆 本 站 按钮 ， 如 图 6-18 所 示 。 
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图 6-17 选择 命令 图 6-18 设置 参数 


步 又 3 将 鼠标 光标 停留 在 网 站 地 址 处 ， 按 【ShifttEnter】 键 换行 ， 选 择 文本 “布什 
将 携 家 人 来 北京 观摩 奥运 会 ”， 选 择 “ 文 本 ”选项 卡 ， 单 击 “ 标 题 1” 按 钮 也， 
然后 单 击 “ 属 性 ”面板 中 的 “居中 ”按钮 笃 ， 如 图 6-19 所 示 。 

步 又 4 选择 标题 文本 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 【CSS 样式 /新建 命令 ， 
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如 图 6-20 所 示 。 
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图 6-19 设置 标题 图 6-20 新建“CSS 样式 ” 
步 又 5 在 弹出 的 对 话 框 中 选中 加 识 和 ( 亚 人 8 将 器 等 ) 四 单 选 按钮 ， 选 中 @ 服 
钮 ， 单 击 于 五 按钮 ， 如 图 6-21 所 示 。 


步 又 6 在 弹出 的 “CSS 规则 定义 ”对 话 框 中 将 颜色 设置 成 “ 浅 蓝 色 (#000099 ) ” 
单 击 记 给 按钮 ， 如 图 6-22 所 示 。 
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图 6-21 新 建 规则 图 6-22 定义 样式 


步骤 7 将 鼠标 光标 停留 在 标题 的 未 尾 ， 按 【ShifttEnter]】 键 换行 ， 选 择 【 插 入 记录 】/ 
【HTML】/【 水 平 线 】 命 令 ， 如 图 6-23 所 示 。 
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步 又 8 选择 插入 的 水 平 线 , 在 “属性 ”面板 的 “高 ” 文本 框 中 输入 “1”, 单 击 【Enter】 
键 ， 如 图 6-24 所 示 。 
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图 6-23 插入 水 平 线 图 6-24 设置 水 平 线 


步骤 9 ”选择 水 平 线 下 的 第 一 行文 字 , 然后 在 “文本 ”选项 卡 下 单 击 “ 标 题 2” 按钮 h2， 
在 属性 面板 中 单 击 “居中 ”按钮 二， 用 相同 的 方法 建 一 个 CSS 样式 表 ， 将 字 
体 大 小 设置 为 “12” 号 ， 然 后 将 文字 颜色 设置 成 “#CC0000”, 单 击 C 厂 
按钮 ， 如 图 6-25 所 示 。 


~ ~ 
魔法 师 , 我 在 设置 二 级 标题 时 ， 
Bllsm mm 1 a a SE 
ls 发 现 有 些 文本 不 需要 设置 成 二 
级 标题 也 变 成 了 二 级 标题 ， 可 
怎么 修改 也 修改 不 过 来 。 
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小 魔女 ， 你 选择 文本 后 ， 单 击 
“代码 ” 视图 , 将 尾 标签 <h2> 
剪 切 到 需要 设置 的 二 级 标题 


Ee 的 最 后 一 个 字 后 面 即 可 。 


图 6-25 设置 二 级 标题 


法 车 
a/ 第 6 章 设计 网 页 中 的 文字 着 法 忆 


步 驿 10 按 【F12] 键 预览 网 页 效果 ， 得 到 如 图 6-16 所 示 的 最 终 效果 。 
6.5 常见 问题 解答 
A. 魔法 师 ， 在 一 个 网 页 中 ， 如 果 正 文 内 容 的 格式 一 样 ， 一 级 标题 的 格式 也 一 样 ， 是 不 
是 只 需 设 置 一 个 样式 就 可 以 了 ? 


屋 ii: 是 的 ，CSS 样式 具备 一 次 编写 多 次 调用 的 功能 ， 对 于 文本 自然 也 不 例外 ， 能 设置 一 
次 完成 的 ， 绝 不 设置 第 二 次 。 


人 A. 魔法 师 ， 在 一 个 <div> 标 签 中 通过 CSS 样式 ， 将 字体 设置 成 了 红色 ， 在 这 个 标签 有 
一 个 <P> 标 签 ， 将 字体 设置 成 了 黑色 ， 字 体 将 显示 什么 颜色 ? 


: 这 个 问题 是 十 分 简单 的 ，CSS 样式 采取 就 近 原则 ， 不 仅 是 对 字体 ， 对 图 片 、 对 布局 
等 一 切 都 有 这 个 属性 。 因 此 ， 这 样 设置 的 字体 将 会 显示 黑色 ， 如 果 <P> 标 签 没 有 定 
义 ， 它 就 显示 红色 。 
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过 关 练 习 


(1) 新 建 一 个 网 页 , 在 编辑 区 的 中 央 绘 制 一 个 层 ， 然 后 在 层 中 输入 李白 的 《 罚 道 难 》， 
要 求 是 用 键盘 输入 ， 不 能 通过 复制 的 方式 。 在 输入 的 过 程 中 ， 熟 练 运用 空格 、 换 行 、 分 段 
等 操作 ， 输 入 完成 后 的 效果 如 图 6-26 所 示 〈 光 盘 :\ 最 终 效 果 \ 第 6 章 \sdn.html)。 
遇 道 难 
李白 
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图 6-26 最 终 效果 
(2) 新 建 一 个 网 页 ， 在 编辑 区 的 中 央 绘 制 一 个 层 ， 然 后 将 记事 本 newsl.txt〔 光 盘 \ 
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py 


素材 \ 第 6 章 mewsl.txt) 的 内 容 复制 过 来 ， 然 后 调整 其 格式 ， 让 这 篇 文稿 整齐 有 序 的 排列 ， 


完成 后 的 效果 如 图 6-27 所 示 〔 光 盘 :\ 最 终 效 果 \ 第 6 章 mewslhtml) 。 
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和 惟 各 控 下 于 庆 目前 的 昔 事 室 全 部 成 局. 如 果 伊 放 成 功 ， 他 下 打算 呈 免 情敌 过 的 
CE 

第 席 要 求 股东 拒绝 人 次 的 提议 ， 再 绘 声 臻 远 一 个 证 明 公 司 论 值 更 辽 475 亿 美元 的 机 会 . 
记者 曾 在 周三 区 电 伊 次 征求 他 对 此 的 回应 ， 但 是 协 以 次 有 了 逢 回 复 . 
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元 戎 时光 要 用 。 


三 也 示 就 此 发 表 评论 。 状 软 之 前 曾经 表示 ， 它 全 然 有 可 能 与 绰 席 达成 部 分 要 网 内 说 ,但 是 
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之 而 有 报 秆 称 交 过 可 能 会 因为 类 与 二 软 达成 交易 而 放 基 与 从 歌 的 合作 ， 因 此 投资 者 对 比 抱 了 很 大 硕 
侯 ; 亿 是 事 二 在册 三 的 炎 虹 似 耶 令 投资 者 有 点 火电。 


落 寺 股票 在 击 三 的 常 诬 交易 中 次 幅 下 跌 0.03 美 元 ， 损 必 于 每 股 22 0 美元， 随后 在 收市 后 交易 中 纪 纺 
下 路 0.26 半 元 。 自 从 言 市 与 谷歌 法 成 计 作 问 议 的 消息 以 来 ， 条 虑 用 票 已 经 回 计 下 跌 109， 
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6-27 最终 效果 


认识 Phofoshop CS3 
调整 图 像 

建立 选区 

图 像 的 基本 编辑 


调整 网 页 中 图 像 的 色彩 
典型 突 例 _ 梅 庄园 林 设 计 首 抽 二 


魔法 师 : 
小 魔女 : 


魔法 师 : 


小 魔女 : 


处 理 与 优化 网 页 中 的 图 片 


锅 a 多 媒体 教学 演示 : 45 分 钟 


小 魔女 ， 你 又 在 做 什么 呢 ? 
我 在 想 如 何 给 网 页 添加 图 片 呢 。 
第 6 章 的 典型 实例 中 ， 新 闻 的 
正文 奶 好 看 ,但 是 感觉 整个 网 页 
空荡荡 的 。 

不 错 ， 网 页 中 许多 位 置 都 需要 
用 图 片 来 点 级 。 

魔法 师 ， 那 如 何 插入 和 编辑 图 
片 呢 ? 


: 网 页 对 图 片 有 着 特殊 的 要 求 ， 


需要 使 用 专门 的 图 形 图 像 处 理 
软件 来 编辑 。 编 辑 完 成 后 ,将 
辐 片 插入 到 网 页 中 即 可 。 


: 那 快 点 教 教 我 吧 ! 
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7.1 认识 Photoshop CS3 


Photoshop CS3 是 一 款 优秀 的 图 形 图 像 处 理 软件 , 借助 它 用 户 可 以 随心 所 欲 地 制作 网 页 
图 像 。 启 动 Photoshop CS3 后 ， 将 自动 打开 其 操作 界面 ， 其 中 主要 包括 标题 栏 、 菜 单 栏 、 
常用 工具 箱 、 属 性 栏 、 工 作 区 和 控制 面板 ， 如 图 7-1 所 示 。 


7.2 调整 图 像 


网 页 中 需要 的 图 片 通常 是 通过 照相 、 扫 描 、 素 材 库 得 到 的 ， 这 些 图 片 大 小 不 一 ， 往 往 
不 能 满足 我 们 的 要 求 ， 这 时 就 需要 对 图 片 进行 调整 。 


7.2.1 调整 图 像 的 大 小 


选择 【文件 】/【 打 开 )】 命令 ,打开 需要 调整 的 图 像 后 ， 即 可 对 其 大 小 进行 调整 。 具 体 
操作 如 下 : 
和 步骤 1 打开 任意 一 幅 图 像 ， 选 择 【图 像 〗/【 图 像 大 小 】 命 令 ， 如 图 7-2 所 示 。 
步骤 2 弹出“ 图像 大 小 ”对 话 框 ， 在 “像素 大 小 ” 栏 中 输入 所 需 数 值 即 可 改变 图 像 
大 小 ， 如 这 里 在 “宽度 ”文本 框 中 输入 “300”， 因 为 默认 是 等 比例 缩放 ， 设 
置 后 高 度 值 也 发 生 相应 的 变化 ， 然 后 单 击 [确定] 按钮 ， 如 图 7-3 所 示 。 
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图 7-2 选择 【图 像 】/【 图 像 大 小 】 命 令 7-3 “图 像 大 小 ”对 话 框 


上 魔法 档案 
| 如 果 只 想 改变 其 高 度 或 者 宽度 ， 只 需 在 图 7-3 所 示 对 话 框 中 取消 选中 四 约束 比例 (C) 复 选 框 
即 可 。 


7.2.2 ”调整 画布 的 大 小 


在 编辑 图 像 的 过 程 中 如 果 遇 到 画布 不 够 用 或 者 过 大 的 情况 ， 用 户 可 以 随时 调整 画布 大 
小 。 调 整 画布 大 小 的 方法 很 简单 ， 具 体操 作 如 下 : 
步骤 1] 打开 任意 一 幅 图 像 ， 选择 【图 像 ]/【 画 布 大 小 】〗 命 令 ， 如 图 7-4 所 示 。 
步骤 2 弹出 “画布 大 小 ”对 话 框 ， 在 “宽度 ”或 者 “高 度 ” 文 本 框 中 输入 所 需 数值 ， 
然后 在 其 后 的 下 拉 列 表 框 中 选择 单位 ， 单 击 “ 定 位 ” 栏 中 的 按钮 定位 画布 后 ， 
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7.3 建立 选区 


在 图 像 处 理 过 程 中 ， 常 常 需 要 选择 图 像 的 部 分 内 容 ， 这 时 选区 就 派 上 用 场 了 。 通 过 创 
建 选区 可 快速 确定 选择 图 像 的 范围 ， 然 后 再 对 其 进行 编辑 ， 如 复制 、 粘 贴 、 旋 转 、 缩 放 等 。 


7.3.1 建立 规则 选区 


在 图 像 中 会 出 现 许 多 规则 的 对 象 ， 如 圆 和 正方 形 之 类 的 对 象 ， 通 过 建立 规则 选区 可 快 
速 将 其 选中 。 在 此 以 选中 图 像 中 的 四 边 形 为 例 进行 讲解 ， 具 体操 作 如 下 : 
步 又 1 打开 需要 编辑 的 图 片 ， 在 常用 工具 箱 中 选择 “矩形 选 框 工具 ”!-}， 如 图 7-6 
所 示 。 
和 步骤 2 将 鼠标 光标 移动 到 工作 中 ， 以 四 边 形 左 上 角 为 起 点 向 右 下 方 拖 动 ， 拖 动 到 右 
下 角 时 释放 鼠标 ， 此 时 即 可 看 到 四 边 形 已 被 框 选 住 ， 并 以 虚线 的 形式 闪 动 ， 
如 图 7-7 所 示 。 
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图 7-6 选择 “和 矩形 选 框 ”工具 图 7-7 绘制 选区 


7.3.2 ”建立 不 规则 选区 


在 图 像 的 编辑 过 程 中 ，90% 的 对 象 都 是 不 规则 的 ， 需 要 想 办 法 将 其 勾 选 出 来 。 在 常用 
工具 箱 中 ，Photoshop CS3 为 建立 不 规则 的 选区 提供 了 5 个 工具 , 分别 是 套 索 工具 只 、 多 边 


形 套 索 工具 六 \、 磁 性 套 索 工具 究 、 快 速 选择 工具 护 . 和 魔 棒 工 具 蕊 。 下 面 以 磁性 套 索 工具 究 为 
例 ， 介 绍 建立 不 规则 选区 的 方法 。 具 体操 作 如 下 : 
步 又 1 ”打开 需要 编辑 的 图 像 ， 在 常用 工具 箱 中 选择 磁性 套 索 工具 胃 ， 如 图 7-8 所 示 。 
和 步骤 2 ”将 鼠标 光标 移动 到 工作 区 中 ， 以 左上 角 为 起 点 ， 沿 着 对 象 的 轮 廊 移动， 选择 
线 将 自动 吸附 在 所 选择 的 对 象 上 ， 当 起 点 和 终点 重合 时 ， 即 可 建立 一 个 不 规 
则 的 选区 ， 如 图 7-9 所 示 。 
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7-8 选择 磁性 套 索 工具 7-9 建立 了 不 规则 的 选区 


麻 法 档案 
[ 磁性 套 索 工具 是 初学 者 比较 常用 的 选择 工具 ， 初 学 者 应 该 牢记 它 的 使 用 方法 。 


7.4 图 像 的 基本 编辑 


图 像 的 复制 、 移 动 和 删除 是 图 像 编辑 中 最 常用 的 操作 ， 通 过 复制 和 移动 图 像 ， 可 以 快 
速 创建 多 个 相同 的 图 像 或 改变 图 像 的 位 置 ; 而 删除 操作 可 以 快速 删除 图 像 中 不 必要 的 部 分 ， 
从 而 减 小 文件 大 小 。 


7.4.1 复制 图 像 


复制 图 像 的 方法 有 两 种 : 一 种 是 使 用 “复制 ”和 “粘贴 ”命令 来 复制 选区 中 的 图 像 ; 
一 种 是 通过 快捷 键 来 复制 图 像 。 下 面 通过 这 两 种 方法 来 复制 图 像 ， 具 体操 作 如 下 : 
步 又 1 创建 图 像 选 区 ， 然 后 选择 【编辑 】/【 持 贝 〗】 命 令 或 按 【CtrHHC]〗 键 ， 将 所 选 
取 的 图 像 区 域 复制 到 剪贴 板 中 。 
步骤 2 在 需要 复制 的 目标 图 像 窗口 中 或 同一 个 窗口 中 ， 选 择 【编辑 】/【 粘 贴 】 命 令 
或 按 【Ctl+V] 键 粘贴 图 像 ， 如 图 7-10 所 示 为 在 同一 个 窗口 中 粘贴 图 像 的 情 
况 ， 因 为 选区 未 取消 ， 粘 贴 的 图 像 被 粘贴 到 选区 中 ， 故 原始 图 像 与 复制 的 图 
像 位 置 相同 ， 使 用 移动 工具 将 其 移动 一 下 位 置 就 可 看 到 复制 的 图 像 。 
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图 7-10 复制 图 像 
魔法 档案 
如 果 按 【CtrHD]】 键 取消 选区 后 再 进行 粘贴 ， 则 复制 的 图 像 与 原始 图 像 的 位 置 会 不 同 。 除 了 
上 面 这 种 复制 图 像 的 方法 ， 还 可 通过 “图 层 ”面板 复制 。 其 方法 是 : 选择 需要 复制 的 图 层 后 右 击 ， 在 
弹出 的 快捷 菜单 中 选择 “复制 图 层 ” 命 令 ， 在 弹出 的 “复制 图 层 ” 对 话 框 中 单 击 C 王 一 | 按钮 即 可 。 


7.4.2 ”移动 图 像 


移动 图 像 可 以 调整 图 像 的 位 置 ， 移 动 图 像 的 方法 比较 简单 ， 首 先 在 工具 箱 中 选择 移动 
工具 Ms， 然 后 将 鼠标 光标 放 在 图 像 上 ， 按 住 鼠 标 左 键 不 放 并 拖 动 拖 动 到 目标 位 置 后 释放 鼠 
标 即 可 。 另 外 ,选择 移动 工具 后 , 按键 盘 上 的 光标 键 也 可 对 图 像 进行 各 个 方向 的 精确 移动 ， 
与 移动 选区 的 方法 相同 。 


7.4.3 ”删除 图 像 


对 于 某 些 不 需要 的 图 像 区 域 ， 可 以 将 其 删除 。 删 除 图 像 有 两 种 方法 ， 分 别 介绍 如 下 。 
党 选择 需要 删除 的 图 像 ， 然 后 选择 【编辑 】/【 清 除 】 命 令 。 
党 按 【Delete】 键 ， 可 以 清除 该 图 像 。 


7.5 调整 网 页 中 图 像 的 色彩 


网 页 的 色彩 搭配 十 分 重要 , 就 如 人 们 穿 衣 搭配 一 样 。 图 像 是 网 页 中 最 重要 的 元 素 之 一 ， 
在 网 页 中 有 着 举足轻重 的 地 位 。 为 了 让 图 像 与 网 页 风格 相 吻 合 ， 就 需要 对 图 像 的 色彩 进行 
调整 。 常 用 的 调整 命令 有 “匹配 颜色 ”、“ 色 相 /饱和 度 ”、“ 亮 度 / 对 比 度 ” 等 ， 下 面 将 
详细 讲解 。 


7.5.1 匹配 颜色 
使 用 “匹配 颜色 ”命令 可 以 将 当前 图 像 或 当前 图 层 中 图 像 的 颜色 与 它 下 一 图 层 中 的 图 


像 或 其 他 图 像 文 件 中 的 图 像 相 匹配 ， 常 用 于 图 像 合成 中 对 两 幅 颜 色相 差 较 大 的 图 像 颜色 进 
行 匹配 ， 具 体操 作 如 下 : 


一 学 束 会 硕 法 碟 
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步骤 1 打开 “汽车 广告 psd” (光盘 :\ 实 例 素 材 \' 第 7 章 \ 汽 车 广告 .psd) ， 并 选中 要 匹 
配 颜 色 的 图 层 ( 即 要 改变 颜色 的 图 层 ) 。 

步骤 2 选择 【图 像 】/【 调 整 】/【 匹 配 颜色 】 命 令 ， 在 弹出 的 “匹配 颜色 ”对 话 框 
的 “ 源 ” 下 拉 列 表 框 中 选择 要 匹配 的 图 像 文件 名 称 ， 这 里 是 在 同一 个 文件 中 
进行 匹配 ， 故 选择 “汽车 广告 .psd”。 在 “图 层 ” 下 拉 列 表 中 选择 “匹配 为 ” 
图 层 ， 观 察 舞 台中 图 像 的 变化 。 

秒 又 3 ”在 “匹配 颜色 ”对 话 框 的 “图 像 选 项 ” 栏 中 调整 明亮 度 、 颜 色 强度 等 ， 使 匹 
配 后 的 图 像 达 到 最 佳 效 果 ， 然 后 单 击 己 齐全 “按钮 ， 如 图 7-11 所 示 。 


“匹配 颜色 ”这 个 命令 
在 对 颜色 搭配 方案 失去 


分 方便 。 » 


图 7-11 匹配 颜色 


7.5.2 ”调整 色相 /饱和 度 


想 要 将 同一 幅 图 像 处 理 成 不 同 的 色相 , 但 图 像 的 色调 不 变 时 , 可 以 使 用 “色相 /饱和 度 ” 
命令 来 完成 。 它 可 以 调整 图 像 中 单个 颜色 的 色相 、 饱 和 度 和 亮度 。 具 体操 作 如 下 : 
步 又 1 ”打开 要 调整 色相 /他 和 度 的 图 像 ， 选 择 【〖 图 像 〗/【 调 整 〗/【 色 相 /他 和 度 】 命 
令 ， 如 图 7-12 所 示 。 
步 又 2 弹出 “色相 /饱和 度 ” 对 话 框 ， 选 中 团 着 色 (0) 复 选 框 ， 拖 动 “ 色 相 ”、“ 饱 和 
度 ” 和 “明度 ”下 方 的 滑 块 至 合适 的 位 置 ， 然 后 单 击 于 -到 E 按钮 即 可 ， 如 
图 7-13 所 示 。 


魔法 档案 
在 设置 图 像 的 色彩 /饱和 度 时 ， 一 定 要 选中 回 若 色 (9) 复 选 框 ， 选 中 后 可 以 更 好 地 编辑 图 像 ， 
还 可 以 使 用 同一 种 颜色 来 置换 原 图 像 中 的 颜色 。 
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图 7-12 选择 “色相 /饱和 度 ”命令 


7.5.3 ”调整 亮度 和 对 比 度 


使 用 “亮度 /对 比 度 ”命令 ， 可 以 很 方便 地 将 光线 不 足 的 图 像 调整 得 亮 一 些 , 或 提升 图 
像 的 对 比 度 。 具 体操 作 如 下 : 
步骤 1 打开 图 像 文件 后 ， 选 择 要 调整 亮度 或 对 比 度 的 图 像 ， 再 选择 【图 像 】/【 调 整 】/ 
【亮度 /对 比 度 】 命 令 ， 如 图 7-14 所 示 。 
和 步骤 2 ” 弹出“ 亮度/ 对比度” 对话 框 ， 拖 动 “亮度 ”和 和“ 对比度” 下方 的 滑 块 或 直接 
在 其 后 的 文本 框 中 输入 数值 ， 然 后 单 击 世 台 _ 按钮 完成 设置 。 如 图 7-15 
所 示 。 
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图 7-14 选择 “亮度 /对 比 度 ”命令 图 7-15 调整 “色相 /对 比 度 ” 


EE 


| 


成 时 
{ 第 7 章 处 理 与 优化 网 页 中 的 图 片 状 法 蔬 


7.6 图 像 中 的 文字 


文字 是 传达 信息 必 不 可 少 的 元 素 , 在 图 像 效 果 中 起 着 体现 图 像 内 涵 的 作用 ,Photoshop 
CS3 提供 了 丰富 的 文字 输入 工具 和 编辑 功能 。 


7.6.1 输入 文字 


利用 文字 工具 不 仅 可 以 输入 横向 或 纵向 的 文字 ， 也 可 以 创建 横向 或 纵向 的 文字 选区 。 
按 住 工具 箱 中 的 横 排 文字 工具 T. 不 放 ， 即 可 弹出 所 有 的 文字 工具 ， 如 图 7-16 所 示 。 


~、 >» 


虽然 有 这 么 多 文字 工具 ,但 
是 输入 文字 的 方法 都 大 至 


A 

人。 本, 过 加- 种 TE6, 在 

| 全 ”编辑 窗口 中 单 击 ， 即 可 输入 

| 】 文字 。 y 
| "| 
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各 个 工具 的 含义 介绍 如 下 。 

学” 横 排 文字 工具 所 : 可 以 输入 横向 的 文字 。 

学 ” 直 排 文字 工具 忆 : 可 以 输入 纵向 的 文字 。 

党” 横 排 文 字 蒙 版 工具 置 : 可 以 创建 横向 的 文字 选区 。 


be 
| 
Ed 
也 
加 
如 
四 
I 
天 
a 


二 
rp 
也 
2, 
0. 
由 
有 | 
忆 
> 
加 
. 
回 
引 


图 7-16 文字 工具 


学 直 排 文字 蒙 版 工具 中 : 可 以 创建 纵向 的 文字 选区 。 
7.6.2 ”设置 文字 
默认 情况 下 输入 的 文字 很 难 符合 设计 者 的 要 求 ， 在 图 像 中 输入 文字 后 一般 都 需要 对 


其 进行 编辑 。 编 辑 文字 的 方法 十 分 简单 ， 只 需 选 择 文字 后 ， 在 “文字 ”面板 中 进行 设置 即 
可 。 具 体操 作 如 下 : 
步 又 1] 启动 Photoshop CS3， 打开 “Al (91)jpg” (光盘 :\ 素 材 \ 第 7 章 \Al (91)jpg) ， 
选择 其 中 需要 进行 设置 的 文字 ， 如 图 7-17 所 示 。 
步 又 2 在 右边 面板 中 单 击 “ 字 符 ” 按 钮 避 ， 在 弹出 的 “字符 /段落 ”面板 中 选择 “ 字 
符 ” 选 项 卡 ， 如 图 7-18 所 示 。 
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图 7-17 选择 文字 7-18 “字符 /段落 ”面板 
步 又 3 此 时 用 户 即 可 在 其 中 设置 字体 、 字 号 和 字体 颜色 等 属性 ， 如 这 里 将 文字 设置 
为 “方正 艺 黑 简体 ”， 字 号 为 “36” 号 ,设置 完成 后 关闭 “字符 /段落 ”面板 ， 
效果 如 图 7-19 所 示 (光盘 :\ 最 终 效 果 \ 第 7 章 \btpsd) 。 


photoshop C53 Extended - [bt.psd @ 100% (“江水 污染 ”调查 考 是 网 站 ，RGB/8#)] 
n 如 图 像 0) 图 层 如 过 择 GG) 话 镜 CL) 分 析 () 视图 WW) 窗口 和 D 帮助 和 
Ms | 口 自动 所 :起 。” 六 口 显示 交 执 控 任 | 而 四 地 邓 包 时 | 囊 营 主 肿 直 利 | 由 


电 
4 


民 
心 
人 
亚 
时 
Ed 
a 


Ee 


图 
2 


图 7-19 设置 完成 后 的 效果 


7.7 图 层 的 基本 操作 


在 编辑 图 像 时 ， 建 议 一 个 对 象 一 个 图 层 ， 不 仅 方便 操作 ， 也 可 通过 图 层 与 图 层 之 间 的 
重 又 制作 出 更 多 特殊 效果 。 默 认 情况 下 ，“ 图 层 ” 面 板 位 于 工作 区 的 右 下 角 。 下 面 主要 介 
绍 通过 “图 层 ” 面 板 进行 图 层 编辑 的 基本 操作 。 
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7.7.1 新建 图 层 


新 建 图 层 是 指 创 建 一 个 新 的 空白 图 层 ， 新 建 的 图 层 将 位 于 “图 层 ” 面 板 中 所 选 图 层 的 

上 面 。 在 图 像 文件 中 创建 一 个 新 的 空白 图 层 有 3 种 方法 ， 分 别 介绍 如 下 。 

和 ”选择 【图 层 】〗】/【 新 建 】 命 令 ， 在 弹出 的 如 图 7-20 所 示 的 “新 建 图 层 ” 对 话 框 中 
单 击 C 本 按钮 即 可 。 

党 按 【CtltShifttrN】 键 也 可 弹出 如 图 7-20 所 示 的 “新 建 图 层 ” 对 话 框 ， 然 后 单 
击 [能 按钮 即 可 。 

”打开 “图 层 ” 面板 ， 单 击 其 下 方 的 “创建 新 图 层 ” 按 钮 回 ， 即 可 新 建 一 个 名 为 “图 
层 2” 的 空白 图 层 ( 蓝 色 条 所 示 的 图 层 ) ， 如 图 7-21 所 示 。 


7-20 “新 建 图 层 ” 对 话 框 7-21 新 建 的 图 层 


7.7.2 复制 图 层 


有 时 需要 将 同一 个 图 像 进行 另外 的 编辑 操作 ， 此 时 就 可 以 将 该 图 像 所 在 的 图 层 进行 复 
制 ， 再 进行 编辑 ,这样 可 以 节省 时 间 , 提高 工作 效率 。 复制 图 层 有 3 种 方法 ,分 别 介绍 如 下 。 
党 在 “图 层 ” 面 板 中 选择 需要 复制 的 图 层 ， 然 后 将 其 拖 动 到 下 方 的 “创建 新 图 层 ” 
按钮 名 上 ， 待 鼠标 光标 变 成 8 了 形状 时 释放 鼠标 ， 即 可 复制 一 个 该 图 层 的 副本 到 原 
图 层 的 上 方 。 
党 在 图 像 窗口 中 ( 若 要 复制 图 像 选区 ， 要 先 创建 一 个 选区 ) 按 【CtlHC]】 键 ， 再 按 
【Ctul+V] 键 ， 在 “图 层 ” 面 板 中 将 生成 一 个 复制 图 像 的 图 层 。 
党 选择 【图 层 〗/【 复 制图 层 】 命 令 ， 在 弹出 的 “复制 图 层 ” 对 话 框 中 单 击 本 按钮 。 


7.7.3 ”删除 图 层 


对 于 不 再 需要 的 图 层 ， 用 户 可 以 将 其 删除 ， 从 而 减 小 图 像 文件 的 大 小 。 删 除 图 层 一 般 
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有 以 下 几 种 方法 : 
党 在 “图 层 ”面板 中 选择 需要 删除 的 图 层 ， 单 击 其 下 方 的 “删除 图 层 ” 按 锂 园 。 
党 在 “图 层 ” 面 板 中 将 需要 删除 的 图 层 拖 动 到 “删除 图 层 ” 按 钮 网 上 。 
党 选择 要 删除 的 图 层 ， 然 后 选择 【图 层 〗】/【 删 除 〗】/【 图 层 〗】 命 令 。 

党 ”在 要 删除 的 图 层 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “删除 图 层 ”命令 。 


7.8 图 像 的 保存 


Photoshop CS3 和 Dreamweaver CS3 文件 的 基本 操作 没有 太 大 的 区 别 ， 用 户 只 需 选 择 
【文件 】/【 新 建 】 命令 即 可 新 建 一 个 文档 ， 但 其 保存 可 没有 那么 简单 ， 因 为 其 中 许多 细节 
都 需要 设置 ， 然 后 才能 保存 。 


7.8.1 图 像 的 常用 格式 


各 种 文件 格式 通常 是 为 特定 的 应 用 程序 创建 的 ， 不 同 的 文件 格式 可 以 用 扩展 名 来 
分 ， 如 PSD、BMP、TIFF、JPEG、CDR 和 EPS 等 ， 这 些 扩展 名 在 文件 以 相应 格式 存储 时 
将 自动 加 到 文件 名 中 。 下 面 详细 介绍 在 Photoshop 中 常用 的 几 种 文件 格式 。 


1. PSD 格式 


PSD 格式 是 Photoshop 的 专用 文件 格式 ， 也 是 唯一 可 以 存 取 所 有 Photoshop 特有 的 文 
件 信息 以 及 支持 所 有 色彩 模式 的 格式 。 如 果 文件 中 含有 图 层 或 通道 信息 ， 就 必须 以 PSD 格 
式 存档 。PSD 格式 可 以 将 不 同 的 图 像 进行 分 层 储存 ， 便 于 修改 和 制作 各 种 特效 。 


2. TIFF 格式 


TIFF (通常 简称 为 TIF ) 是 一 种 应 用 非常 广泛 的 格式 ， 可 以 在 许多 不 同 的 平台 和 应 用 
软件 间 交 换 信 息 ， 同 时 还 可 以 LZW 方式 进行 压缩 。 在 Photoshop 中 以 TIFF 格式 存档 时 ， 
可 以 选择 PC 或 Mac 格式 ， 以 及 是 否 进行 LZW 无 损 压 缩 。 


Xl 


3.JPEG ( JPE ) 格式 


JPEG (通常 简称 为 JPG) 是 一 种 高 效 压缩 图 像 文件 的 格式 ， 在 存档 时 能 够 将 人 眼 无 法 
分 辨 的 图 像 像素 删除 ， 以 节省 储存 空间 ， 但 这 些 被 删除 的 图 像 像素 无 法 在 解压 时 还 原故 
其 又 称 为 “失真 压缩 ”或 “有 损 压 缩 ”) ， 所 以 JPEG 文件 并 不 适合 放大 观看 ， 输 出 为 印 
刷 品 时 品质 也 会 受到 影响 。 
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4. BMP 格式 


BMP 文件 是 Microsoft 公司 Windows 的 图 像 格式 ， 它 除了 图 像 深 度 可 选 以 外 ， 不 采用 
其 他 压缩 ， 因 此 BMP 文件 所 占用 的 空间 很 大 ， 其 深度 可 选 bit、4bit、8bit 及 24bit。 


5. GIF 格式 


GIF 是 CompuServe 公司 制订 的 一 种 图 像 交 换 格式 ， 这 种 经 过 压缩 的 格式 可 以 使 图 像 
文件 在 通信 传输 时 较为 经 济 。 它 所 使 用 的 LZW 压缩 方式 ， 可 以 将 文件 的 大 小 压缩 一 半 ， 
而 且 解 压 时 间 不 会 太 长 。 现 今 的 GIF 格式 仍 只 能 达到 256 色 ， 但 其 中 的 GIF89a 格式 能 储 
存 成 背景 透明 化 的 形式 ， 并 且 可 以 将 数 张 图 存 成 一 个 文档 ， 形 成 动画 效果 。 


6. EPS 格式 

EPS 是 一 种 应 用 非常 广泛 的 PostScript 格式 ， 常 用 于 绘图 或 排版 软件 ， 用 EPS 格式 存 
档 时 可 通过 对 话 框 设置 存储 的 各 种 参数 。 

7. Scitex CT 格式 


Scitex 是 一 种 图 像 处 理 及 印刷 系统 ， 它 所 使 用 的 SCT 格式 可 用 来 记录 RGB、CMYK 
及 灰 度 模式 下 的 连续 层次 。 在 Photoshop 软件 中 ， 用 SCT 格式 建立 的 文件 可 以 和 Scitex 系 
统 相互 交换 。 


8.， PNG 格式 

PNG 使 用 从 LZ77 派生 的 无 损 数据 压缩 算法 ， 用 来 存储 灰 度 图 像 时 ， 灰 度 图 像 的 深度 
可 多 达 16 位 ; 存储 彩色 图 像 时 ， 彩 色 图 像 的 深度 可 多 达 48 位 ; 并 且 还 可 存储 多 达 16 位 的 
a 通道 数据 。 


) 魔法 档案 
PSD 是 Photoshop 的 源 文件 格式 ，GIF、JPEG 和 PNG 是 网 页 中 常用 的 图 像 格式 ， 初 学 者 
有 必要 掌握 这 4 种 格式 。 


7.8.2 保存 图 像 文件 


完成 图 像 制 作 后 或 需要 退出 Photoshop CS3 的 工作 界面 时 , 需要 对 图 像 文件 进行 保存 ， 
以 免 造 成 不 必要 的 损失 。 下 面 将 保存 图 像 ， 具 体操 作 如 下 : 

步 驿 1 选择 【文件 】/【 存 储 】 命 令 ， 如 图 7-22 所 示 。 

步骤 2 弹出 “存储 为 ”对 话 框 ， 在 “保存 在 ”下 拉 列 表 框 中 指定 文件 保存 的 位 置 ， 


4 | 


新 手 学 做 网 站 
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在 “文件 名 "文本 框 中 输入 要 保存 的 文件 名 ( 默认 为 新 建文 件 时 输入 的 名 称 )， 


如 输入 “mm”。 


步骤 3 在 “格式 ”下 拉 列 表 框 中 选择 要 保存 的 文件 格式 ( 如 果 文 件 包 含有 图 层 ， 将 
自动 设置 为 PSD 格式 ) ， 如 选择 “JPEG”， 设 置 完成 后 单 击 LEE@ |] 按钮 即 
可 ， 如 图 7-23 所 示 。 


CE E19 
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图 7-22 选择 【文件 】/【 存 储 】 命令 
步 又 4 弹出 “JPEG 选项 ”对 话 框 ， 单 击 [确定 按钮 ， 如 图 7-24 所 示 。 
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7-24 “JPEG 选项 ”对 话 框 
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7-23 “存储 为 ”对 话 框 


ed 


在 保存 文件 的 过 程 中 选择 不 
同 的 保存 格式 将 弹出 不 同 的 
对 话 框 ,初学 者 不 必 理 会 其 中 
的 参数 ， 直 接 间 刻下 下 过 


和 钮 即 可 。 
"> 


羔 二 


好 / 第 了 章 ， 处 理 与 优化 网 页 中 的 图 片 
7.9 将 图 像 插入 到 网 页 中 


完成 图 像 制 作 后 ， 还 需要 将 图 像 插 入 到 网 页 中 ， 才 能 让 网 页 图 文 并 茂 。 


7.9.1 插入 图 像 


直接 插入 图 像 是 在 网 页 中 插入 图 像 最 常用 的 方法 ， 适 合 于 要 添加 的 图 像 已 保存 在 电脑 
中 的 情况 。 通 常 要 插入 的 图 像 保存 在 站 点 的 文件 夹 下 。 下 面 以 在 网 页 news.html (光盘 :\ 素 
材 \ 第 7 章 mewsmews.html) 中 插入 图 像 为 例 ， 介 绍 插入 图 像 的 方法 。 具 体操 作 如 下 : 
步 又 1 在 打开 的 编辑 窗口 中 ， 将 鼠标 光标 定位 在 需要 插入 图 像 的 位 置 ， 选 择 【 插 入 
记录 】/【 图 像 〗 命 令 ， 如 图 7-25 所 示 。 
步 又 2 弹出 “选择 图 像 源 文件 ”对 话 框 ， 在 “查找 范围 ”下 拉 列 表 框 中 选择 所 需 图 
像 的 位 置 (光盘 : \ 素 材 \ 第 7 章 \news\images\31.gif) ， 在 其 下 的 列表 框 中 双 
击 需要 的 文件 ， 如 图 7-26 所 示 。 


和 2, eR 
于 他 坟 付 宝 休 计 一 家 下 有三 
RH 有 


图 7-25 ”选择 【插入 记录 】/【 图 像 】 命 令 图 7-26 “添加 图 像 源 文件 ”对 话 框 

步骤 3 在 弹出 的 “图 像 标签 辅助 功能 属性 ”对 话 框 中 单 击 记 到 _] 按 钮 ， 如 图 7-27 
所 示 。 

步骤 4 返回 到 编辑 窗口 中 ， 查 看 插入 的 图 像 效 果 ， 选 择 【文件 】/【 保 存 】 命 令 ， 然 
后 按 【F12] 键 ， 预 览 插入 的 图 像 ， 效 果 如 图 7-28 所 示 ( 光 人 盘 :\ 最 终 效果 \ 第 7 
章 \news\news.html) 。 
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图 7-27 “图 像 标签 辅助 功能 属性 ”对 话 框 图 7-28 最 终 效果 


网 魔法 档案 

在 制作 网 页 的 过 程 中 ， 通 常会 出 现 暂时 还 没 想 好 要 插入 哪 幅 图 像 或 所 需 的 图 像 还 没有 制 
作出 来 的 情况 ， 这 样 岂 不 会 影响 后 面 的 制作 ? 别 急 ， 图 像 占 位 符 可 以 帮助 我 们 解决 这 个 问题 使 用 
图 像 占 位 符 可 在 网 页 中 占据 一 个 位 置 ， 然 后 可 以 继续 制作 网 页 ， 当 确定 需 插入 的 图 像 时 再 通过 图 像 


占 位 符 将 图 像 插入 即 可 。 
腐 法师 ， 插 和 图像 在 “选择 图 像 源 文 件 ”对话 框 中 双击 要 插入 的 ~、~@ 
时 图 像 不 在 站 点 图 像 后 ， 若 所 选择 的 图 像 文件 不 在 定义 的 本 地 
内 怎么 办 ? 站 点 中 ， 系 统 会 自动 弹出 提示 对 话 框 ， 单 击 
7 [RE 按钮 ， 阐 出 “复制 文件 为 ”对 话 杠 ， 


选择 保存 路 径 ， 按 向 导 提示 进行 操作 即 可 。 到 7 
7.9.2 设置 图 像 
图 像 插入 到 网 页 后 ,如 果 觉 得 图 像 不 符合 要 求 ， 则 需要 对 其 进行 调整 ,如 图 像 的 大 小 、 


图 像 说 明 、 对 齐 方式 、 边 距 和 边框 等 。 选 择 要 设置 属性 的 图 像 后 ， 在 “属性 ”面板 中 即 可 
进行 图 像 属性 的 设置 ， 如 图 7-29 所 示 。 


RN 
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7-29 图 像 “ 属 性 ”面板 


7.10 设置 图 像 超 链接 


在 网 页 中 , 通过 Dreamweaver CS3 链接 的 只 有 图 像 和 文字 , 文字 的 链接 前 面 已 经 讲 过 ， 
图 像 的 链接 分 为 普通 链接 和 热点 链接 ， 下 面 详细 讲解 。 


7.10.1 设置 图 像 的 普通 链接 


当 图 像 插入 到 网 页 后 ， 为 了 方便 浏览 者 浏览 网 页 ， 设 计 者 通常 会 为 图 像 建立 超 链接 。 
具体 操作 如 下 : 
步骤 1 在 打开 的 编辑 窗口 中 , 选择 需 创建 超 链接 的 图 像 ， 单 击 “ 属 性 ”面板 中 的 “ 链 
接 ” 下 拉 列 表 框 后 的 轧 按 钮 ， 如 图 7-30 所 示 。 
步骤 2 弹出 “选择 文件 ”对 话 框 ， 在 “查找 范围 ”下 拉 列 表 框 中 选择 所 需 文档 的 位 
置 ， 查找 需要 链接 的 网 页 ， 如 这 里 选择 “2-1.html”， 双 击 它 即 可 ， 如 图 7-31 
所 示 。 
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图 7-30 单 击 吕 按 钮 图 7-31 “选择 文件 ”对 话 框 


步 又 3 在 “属性 ”面板 的 “目标 ”下 拉 列 表 框 中 选择 超 链 接 网 页 打开 的 方式 ， 如 这 
里 需要 弹出 新 窗口 ， 则 选择 “-bank”， 完 成 超 链接 的 创建 ， 如 图 7-32 所 示 。 
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步 又 4 按 【F12】 键 在 浏览 器 中 预览 网 页 ， 单 击 添加 超 链 接 的 图 像 ， 将 在 新 窗口 中 
打开 目标 网 页 “2-1.html”， 如 图 7-33 所 示 。 


站 攻 各 直 人 和 和 看 下 直 训 ， 东突 一 局 沁 办证 雪白 计 他 
六 人 雪 区 也 条 鸭 和 天 中， 各 更 人 和 因 0 四 ， 呈 从 池 人 相公 地 而 证 # 放 
水 磺 尼 并 和 二 全 网 几 从 共和 兴 玉 二 只 有 全 
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7-32 选择 打开 方式 7-33 ”建立 的 图 像 超 链接 


| 厅 法 档案 
图 像 的 链接 和 文字 的 链接 一 样 ， 也 可 以 建立 邮箱 链接 和 绝对 路 径 链接 ， 若 需要 创建 邮箱 链 
接 ， 可 在 邮箱 前 输入 “mailto:”; 若 需 创建 绝对 路 径 链 接 ， 则 需要 在 网 址 前 如 上 “http://”。 


7.10.2 设置 图 像 的 热点 超 链接 


热点 超 链接 只 对 图 像 产生 作用 ， 一 幅 图 像 上 可 以 有 多 个 热点 超 链接 。 设 置 热点 超 链接 
分 为 两 步 ， 第 一 步 是 建立 热点 ， 第 二 步 才 是 建立 超 链接 。 有 具体 操作 如 下 : 
和 步骤 1 ”在 打开 的 编辑 窗口 中 ， 选 择 需 创建 热点 超 链接 的 图 像 ， 在 “属性 ”面板 左下 
角 选 择 一 个 热点 绘制 工具 ， 如 多 边 形 热点 工具 ， 如 图 7-34 所 示 。 
步骤 2 在 图 像 上 按 住 鼠标 左 键 不 放 ， 从 所 需 区 域 的 左上 角 向 右 下 角 拖 动 创建 多 边 形 
热点 区 域 ， 创 建 完成 后 的 效果 如 图 7-35 所 示 。 


魔法 档案 

“属性 ”面板 下 的 4 个 按钮 都 是 用 来 建立 热 区 的 ， 其 中 指针 热点 工具 用 于 选择 热点 、 移 
动 热点 、 调 整 热点 大 小 等 ; 矩形 热点 工具 门 用 于 绘制 矩形 热点 ; 椭圆 形 热点 工具 器用 于 绘制 国 形 热 点 
多 边 形 热点 工具 品 用 于 绘制 不 规则 的 多 边 形 热点 。 
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图 7-34 选择 热点 工具 图 7-35 绘制 热点 区 域 


步 又 3 在 “属性 ”面板 的 “链接 ” 文本 框 中 输入 要 链接 网 页 的 URL 地 址 ， 在 “ 目 
标 ” 下 拉 列 表 框 中 选择 打开 目标 网 页 的 方式 ， 完 成 图 像 热点 超 链接 的 创建 ， 


如 图 7-36 所 示 。 
步 又 4 保存 网 页 后 ， 按 【F12】 键 预览 网 页 ， 效 果 如 图 7-37 所 示 ， 单 击 它 即 可 进入 
链接 的 网 页 。 


CEE IE ETT EE 
a HN 
LC TE 


7-37 预览 效果 
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7.11 典型 实例 一 一 梅 庄园 林 设 计 首 页 


下 面 将 综合 运用 前 面 所 学 知识 制作 一 个 图 文 并 茂 的 网 页 一 一 “ 梅 庄 园林 设计 ?的 首页 ， 
进一步 加 深 认 识 ， 提 高 动手 能 力 。 最 终 效果 如 图 7-38 所 示 〔 光 盘 :\ 最 终 效 果 \ 第 7 章 \sl\ 
index.html) 。 
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图 7-38 最终 效 果 


具体 操作 如 下 : 

和 步骤 1 启动 Dreamweaver CS3， 新 建 一 个 名 为 index.html 的 网 页 ， 布 局 完成 后 为 每 

一 一 个 图 层 命名 ， 如 图 7-39 所 示 。 

步骤 2 启动 Photoshop CS3， 新 建 一 个 文件 。 选择 【图 像 〗/【 图 像 大 小 〗 命 令 ， 弹 
出 “图 像 大 小 ”对 话 框 ， 取 消 选中 口 BR 回复 选 框 ， 在 “宽度 ”和 “高 度 ” 
文本 框 中 分 别 输入 “519” 和 “71”， 在 其 右边 的 下 拉 列 表 框 中 选择 “像素 ” 
选项 ， 然 后 单 击 于 -确定 一 按钮， 如 图 7-40 所 示 。 
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图 7-39 布局 网 页 图 7-40 “图 像 大 小 ” 

和 步骤 3 在 常用 工具 箱 中 选择 矩形 选 框 工具 呈 1j， 如 图 7-41 所 示 。 

步骤 4 在 工作 区 右上 角 建 立 一 个 矩形 选区 。 选 择 油漆 桶 工具 心 ， 单 击 里 ， 在 弹出 的 
面板 中 选择 “黑色 ”为 矩形 选区 填充 颜色 ， 如 图 7-42 所 示 。 
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步 又 5 按 【CtltD】 键 取消 选区 ， 再建 一 个 选区 ， 用 相同 的 方法 将 其 填充 为 红色 ， 
完成 后 如 图 7-43 所 示 。 


步 又 6 在 常用 工具 箱 中 选择 横 排 文 字 工具 T， 如 图 7-44 所 示 。 


图 7-41 选择 矩形 选 框 工 具 图 7-42 建立 选 


J 

a 魔法 档案 

在 Photoshop 中 要 养 成 多 建 图 层 的 习惯 ， 在 操作 过 程 中 应 保持 一 个 对 象 一 个 图 层 ， 这 样 广 
便 操作 、 吻 于 编辑 。 
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图 7 填充 红色 图 7-44 选择 横 排 文字 工具 
步 又 7 ” 按 【F7] 键 打开 “图 层 ”面板 ， 单 击 “新 建 ” 按 钮 司 ， 如 图 7-45 所 示 。 
步骤 8 新 建 图 层 后 ， 在 其 中 输入 文字 ， 然 后 在 属性 栏 中 设置 文字 的 字体 和 字号 ， 效 
果 如 图 7-46 所 示 。 
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图 7-45 新 建 图 层 图 7-46 输入 文字 并 设置 字体 、 字 


步 又 9 制作 完成 后 ， 选 择 【文件 】/【 存 储 】 命 令 ， 如 图 7-47 所 示 。 

步骤 10 弹出 “存储 为 ”对 话 框 ， 在 “保存 在 ”下 拉 列 表 框 中 选择 图 像 保 存 位 置 ， 在 
“文件 名 ”文本 框 中 输入 名 称 ， 如 “topl”， 在 “格式 ”下 拉 列 表 中 选择 存 
储 格式 “GIF”， 然 后 单 击 LEB@ 按钮 ， 如 图 7-48 所 示 。 


魔法 档案 
在 网 页 制作 过 程 中 应 注意 页 面 的 整体 美观 ， 初 学 者 可 把 一 个 网 页 当成 一 张 图 片 来 设计 ， 制 
作 完 成 后 再 将 其 裁剪 成 小 图 片 ， 这 样 婚 方便 又 快捷 。 
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图 7-47 选择 【文件 】/【 存 储 】 命令 图 7-48 “存储 为 ”对 话 框 

步骤 11 弹出 “索引 ”对 话 框 ， 保 持 其 默认 设置 ， 依 次 单 击 己 询 定 按钮。 

步 又 12 用 相同 的 方法 处 理 网 页 中 的 其 他 图 片 ， 然 后 保存 在 一 个 文件 夹 中 。 选 择 【 插 
入 记录 】/【 图 像 】 命令, 将 其 插入 到 在 步骤 1 中 布局 好 的 网 页 中 ， 如 图 7-49 
所 示 。 

步 又 13 “公司 新 闻 ” 位 于 中 间 ， 和 “图 片 新 闻 ”、“ 新 品 图 片 ” 接 近 ， 如 果 通过 细 

线 隔 开 ， 可 以 让 这 个 网 页 更 加 美观 。 编 辑 “ 公 司 新 闻 ” 这 个 层 ， 然 后 通过 纺 

辑 CSS 样式 表 给 左右 添加 边框 ， 添 加 完成 后 效果 如 图 7-50 所 示 。 
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DT 1 
公司 新 闻 新 品 图 片 
1 PP 
EE [添加 边框 | ”一 
品质 生 注 有 着 更 糊 大 
7-49 插入 图 片 图 7-50 添加 边框 


步骤 14 “公司 新 闻 ” 是 一 个 文字 性 的 板块 ， 可 根据 前 面 所 讲 的 CSS 样式 对 其 进行 设 
置 ， 设 置 完成 后 的 效果 如 图 7-51 所 示 。 
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步骤 15 “版 权 信息 ”也 属于 文字 板块 ， 也 可 通过 同样 方法 快速 设计 ， 设 置 完 成 后 效 
果 如 图 7-52 所 示 。 


公司 新 网 新 品 图 片 


3 | 辣 遇 证 
有 


公司 新 闻 
| 开放 入 上 市: 有 二 来 尖 文 化 WR 


图 7-51 设置 文字 新 闻 图 7-52 设置 版 权 信 息 


步 又 16 图 片 需要 创建 导航 条 才能 将 其 与 其 他 网 页 联系 起 来 ， 这 里 我 们 采用 在 图 片上 
建立 热点 选区 来 完成 导航 条 的 制作 。 选 择 需 要 链接 的 图 片 后 ， 单 击 “ 属 性 ” 


面板 中 的 “和 矩形 热点 工具 ”按钮 门 ， 如 图 7-53 所 示 。 
步骤 17 绘制 完成 后 ， 在 “属性 ”面板 的 “链接 ”文本 框 中 输入 链接 地 址 ， 在 “目标 ” 


人 os 如 图 7-54 所 示 。 
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7-53 选择 热点 工具 7-54 ”建立 链接 
步骤 18 用 相同 的 方法 建立 其 他 超 链接 ， 最 终 效果 如 图 7-38 所 示 。 


法 村 
第 了 7 章 ， 处 理 与 优化 网 页 中 的 图 片 状 法 忆 


a 
7.12 常见 问题 解答 


A. 魔法 师 ， 我 有 一 张 图 片 ， 背 景 是 白色 的 ， 中 间 有 一 柔 好 看 的 花 骨 采 儿 ， 我 想 在 花 骨 
采 处 建立 选区 ， 哪 种 办 法 最 简单 呢 ? 


人 :你 可 以 用 磁性 套 索 工具 选择 花 骨 茶 儿 ， 不 过 这 种 方法 不 是 最 简单 的 ， 有 一 种 特别 的 
方法 ， 那 就 是 用 魔 棒 工 具 选 择 背 景 ， 然 后 选择 【选择 】/【 反 向 】 命 令 ， 即 可 将 中 心 
的 花 骨 采 选中 。 在 选择 的 时 候 , 如 果 背 景 比较 单一 , 通常 是 选择 背景 , 然后 通过 “ 反 
向 ”命令 选择 所 需 的 对 象 。 


入: 魔法 师 ， 有 一 张 图 片 的 颜色 好 像 暗 了 点 ， 其 他 部 分 没 问题 ， 有 什么 办 法 可 以 让 它 变 
得 明亮 一 些 吗 ? 


人 :小 魔女 ， 你 没有 专心 听讲 哟 ! 在 这 一 章 中 我 们 曾经 学 习 了 “亮度 /对 比 度 ”命令 ， 用 
它 即 可 处 理 图 片 的 明暗 程度 。 在 许多 情况 下 ， 当 拍摄 的 照片 亮度 不 够 时 就 可 通过 该 
命令 对 其 进行 调整 和 编辑 。 


外 克 法 师 我 在 山名 图 片 时 ， 答 入 了 文字 、 于 元 了 对 象 ， 可 是 为 什么 我 起 修 改 图 片 时 ， 
却 怎 么 也 选择 不 了 需要 修改 的 部 分 ? 


净 W， 之 所 以 造成 这 种 情况 很 可 能 是 因为 图 层 不 明确 。 在 Photoshop 中 ， 编 辑 图 像 后 再 想 对 
其 进行 修改 , 可 能 很 难 正确 地 选择 需要 的 图 层 , 这 是 初学 者 常见 的 毛病 。 提 醒 初学 者 ， 
一 定 要 为 每 一 个 对 象 建立 一 个 图 层 ， 然 后 为 图 层 命 名 ， 这 样 利于 编辑 与 修改 。 


A. 魔法 师 ， 我 在 Photoshop 中 编辑 的 图 片 稍 大 ， 在 Dreamweaver CS3 中 可 以 将 图 片 缩 


小 些 吗 ? 


A 答案 是 肯定 的 ， 你 可 以 选择 图 片 ， 直 接 在 “属性 ”面板 中 输入 图 片 的 宽度 和 高 度 值 ， 
也 可 以 拖 动 图 片 ， 让 图 片 达到 适合 的 大 小 ， 这 里 修改 只 是 修改 了 图 片 在 网 页 中 的 显 
示 大 小 ， 并 不 能 修改 图 片 本 身 ， 所 以 建议 初学 者 ， 通 过 Photoshop 编辑 图 片 大 小 后 ， 
保存 图 片 再 将 其 插入 Dreamweaver， 以 百分之百 的 比例 显示 图 片 ， 这 样 才能 保证 图 
片 在 网 页 中 的 显示 效果 。 


; 
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7.13 过 关 练习 


(1) 启动 Photoshop CS3， 新 建 一 个 文件 ， 将 图 像 大 小 设置 成 400X 400 像素 。 打 开 素 
材 (光盘 \ 素 材 \ 第 7 章 \sLjpg) ， 选 择 一 个 正方 形 区 域 ， 然 后 复制 到 新 建 的 文件 上 ， 并 在 其 
中 输入 文字 ， 将 文字 设置 成 36 号 、 方 正 水 黑 简体 ， 最 终 效果 如 图 7-55 所 示 (光盘 :\ 最 终 效 
果 \ 第 7 章 \ 茶 叶 psd) 。 
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7-55 最终 效 果 
(2) 新 建 一 个 网 页 ， 输 入 如 图 7-56 所 示 的 信息 ， 然 后 设置 其 文字 ， 将 图 片 
U1235P2DT20080704092519.jpg (光盘 :\ 素 材 \ 第 7 章 \U1235P2DT20080704092519.jpg ) 插入 
到 网 页 中 ， 最 终 效 果 如 图 7-56 所 示 。 


和 所 亿 岁 最 古老 钻石 昔 藏 地 球 最 早生 命 信息 (图 ) 


网 


la 之 


7-56 最终 效果 
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动画 让 网 页 更 精彩 


认识 Flash CS3 
创建 补 间 动 画 
创建 引导 动画 
创建 遮 埋 动画 
将 动画 插入 到 网 页 中 去 


典型 实例 一 一 “ 爱 你 最 珍贵 < 


魔法 师 : 


小 魔女 : 


魔法 师 : 


网" 多 霸 体 教学 演示 61 分 名 


小 魔女 ， 通 过 前 面 的 学 习 ， 我 
们 已 经 能 够 制作 一 个 简单 的 个 
人 网 站 了 。 

不 错 ， 而 且 还 能 让 网 页 图 文 并 
茂 ， 朋 友 们 见 了 我 的 个 人 网 页 
一 定 会 美 慕 我 的 。 

瞪 把 你 高 兴 成 这 个 样子 图 片 
可 以 打破 网 页 沉寂 的 局 面 ， 动 
画 则 可 让 网 页 更 加 精彩 。 


: 这 可 难 了 ， 我 听 说 过 ， 可 是 没 


有 动手 做 过 咱 ! 


: 不 要 着 急 ， 网 页 中 的 动画 其 实 


也 十 分 简单 只 需要 认真 听课 ， 
学 完 本 章 你 就 会 了 。 
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8.1 认识 Flash CS3 


Flash CS3 是 一 个 专门 制作 动画 的 软件 , 用 它 可 以 制作 出 别致 的 动画 , 现在 国内 外 有 许 
多 动画 片 都 是 通过 此 软件 来 完成 的 ， 由 此 可 以 看 出 ， 这 个 软件 的 功能 十 分 强大 。 对 于 网 页 
设计 者 来 说 ， 用 在 网 页 中 的 动画 是 简单 的 动画 。 如 图 8-1 所 示 为 Flash CS3 的 操作 界面 。 
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图 8-1 Flash CS3 的 操作 界面 


这 个 操作 界面 并 不 复杂 ， 下 面 将 详细 讲解 其 常用 的 工具 和 命令 。 
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工具 箱 : Flash CS3 工具 箱 和 Photoshop CS3 中 的 工具 箱 大 同 小 异 ,熟悉 Photoshop 
的 人 很 快 就 会 使 用 Flash 工具 箱 。 

“属性 ”面板 : Flash CS3 的 “属性 ”面板 和 Dreamweaver CS3 的 “属性 ”面板 位 
于 同一 位 置 ， 其 用 法 也 差不多 ， 选 择 一 个 对 象 后 ， 即 可 出 现 不 同 的 面板 。 
浮动 面板 : Flash CS3 的 浮动 面板 和 Photoshop CS3、Dreamweaver CS3 中 的 浮动 
面板 大 同 小 异 ， 如 果 没有 显示 则 可 以 通过 “窗口 ”菜单 下 面 的 命令 将 其 调 出 来 。 
时 间 轴 和 图 层 : 时 间 轴 和 图 层 位 于 菜单 栏 的 下 方 ， 图 层 的 操作 和 Photoshop 差 不 
多 。 时 间 轴 是 控制 动画 的 标准 ， 一 个 完整 的 动画 里 面 ， 一 般 有 普通 帧 、 关 键 帧 和 
空白 关键 帧 ， 创 建 它们 也 十 分 简单 ， 在 时 间 轴 上 右 击 ， 选 择 相应 的 命令 即 可 。 
舞台 : 也 可 称 作 编辑 窗口 ， 它 是 用 来 编辑 动画 的 场所 。 
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一 全 人 
8.2 创建 补 间 动 画 


在 网 页 动画 中 ， 补 间 动 画 是 使 用 得 最 频繁 的 一 种 动画 ， 它 通常 用 于 在 两 个 关键 帧 上 创 
建 相同 或 不 同 的 图 像 ， 然 后 为 图 像 赋予 移动 、 选 中 、 变 形 等 操作 。Flash CS3 中 的 补 间 动 画 
又 分 为 动画 补 间 和 形状 补 间 动 画 两 种 。 


1， 动画 补 间 动 画 


动画 补 间 动 画 就 是 在 两 个 关键 帧 处 创建 相同 的 对 象 ， 然 后 为 这 两 个 对 象 创建 大 小 、 旋 
转 和 移动 等 自身 属性 的 变化 。 下 面 以 创建 一 个 名 为 “风车 ”的 动画 补 间 动 画 为 例 进行 介绍 ， 
具体 操作 如 下 : 
步骤 1 启动 Flahs CS3， 选 择 【 文 件 】〗/【 打 开 】 命 令 ， 打 开 “ 风 车 .fla” ( 光 检 \ 素 材 \ 
第 8 章 \ 风 车 .fla) 。 
步 又 2 将 鼠标 停留 在 时 间 轴 上 的 任意 一 帧 , 如 第 30 帧 上 , 右 击 并 在 弹出 的 快捷 菜单 
中 选择 “插入 关键 帧 ”命令 ， 如 图 8-2 所 示 。 
步骤 3 将 鼠标 光标 停留 在 第 一 到 第 三 帧 的 任意 一 帧 上 ， 右 击 并 在 弹出 的 快捷 莱 单 中 
选择 “创建 补 间 动 画 ”命令 ， 如 图 8-3 所 示 。 


[sh 
轴 1 FE 


图 8-2 创建 关键 帧 图 8-3 创建 补 间 动 画 


步 又 4 在 “属性 ”面板 的 “旋转 ”下 拉 列 表 框 中 选择 “ 顺 时 针 ” 选 项 ， 如 图 8-4 
所 示 。 

步骤 5 制作 完成 后 ， 按 【Enter+Ctr1】 键 进行 预览 ， 最 终 效果 如 图 8-5 所 示 ( 光盘 
最 终 效果 \ 第 8 章 \ 风 车 fla) 。 


WW 魔法 档案 

创建 动画 补 间 动 画 ， 选 择 的 对 象 一 定 要 是 组 合 了 的 元 件 ， 而 且 对 象 本 身 在 第 一 关键 帧 与 
最 后 一 个 关键 帧 要 发 生 位 移 ， 这 样 才能 将 补 间 动 画 创建 成 功 。 如 果 创建 未 成 功 ， 时 间 轴 上 的 两 个 关 
键 帧 之 间 的 线 将 以 虚线 显示 。 


扰 | 
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图 8-5 预览 动画 
2.， 形 状 补 间 动 画 


形状 补 间 动 画 是 将 第 一 个 对 象 逐渐 变换 为 第 二 个 对 象 ， 在 网 页 广告 中 用 得 比较 多 。 下 
面 以 一 幅 简 单 的 网 页 广告 为 例 进行 讲解 ， 具 体操 作 如 下 : 
步骤 1 新 建 一 个 Flash 文档 ， 在 “属性 ”面板 中 修改 舞台 大 小 为 “600 x 100” 像 素 ， 
将 背景 设置 成 “黑色 ”， 如 图 8-6 所 示 。 
和 步骤 2 选择 工具 箱 中 的 文本 工具 TT, 输入 文字 “奇幻 武侠 的 天 堂 ”, 按 两 次 【Ctrl+B】 
键 分 离 对 象 ， 在 第 25 帧 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “插入 关键 帧 ” 命 
令 ， 如 图 8-7 所 示 。 
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图 8-6 设置 背景 图 8-7 插入 关键 帧 
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步 又 3 用 相同 的 方法 在 第 25 帧 和 第 50 帧 分 别 输入 “都 市 情感 的 盛 宣 ” 和 “一 起 欣 
赏 美文 ， 感 受 书香 ……”， 如 图 8-8 所 示 。 

步骤 4 然后 在 第 1 帧 到 第 25 帧 的 任意 一 帧 处 右 击 , 在 弹出 的 快捷 菜单 中 选择 “创建 
补 间 形 状 ” 命 令 ， 如 图 8-9 所 示 。 


ea 
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图 8-8 输入 文字 图 8-9 选择 命令 


步骤 $ 用 相同 方法 在 第 25 帧 和 第 50 帧 间 创 建 形 状 补 间 动 画 ,选择 【 文 件 ] 人 保存】 
命令 ， 将 其 保存 ， 按 【Ctrl+E]】〗 键 预览 制作 的 动画 ， 如 图 8-10 所 示 (光盘 
最 终 效果 \ 第 8 章 \ 广 告 .fla) 。 


~ 
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图 8-10 预览 动画 


8.3 创建 引导 动画 


引导 动画 也 是 网 页 中 常见 的 动画 ， 虽 然 出 现 频率 没有 补 间 动 画 那 么 高 ， 但 是 它 也 常常 


Rs . 
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出 现在 网 页 中 。 所 谓 引导 动画 就 是 预先 设置 好 动画 运动 的 轨迹 ， 然 后 让 其 沿 着 轨迹 线 运 
动 的 动画 ， 引 导 动 画 是 一 种 非常 实用 的 动画 效果 ， 许 多 动画 特效 中 都 必须 用 到 它 ， 如 蝴蝶 
飞行 。 


8.3.1 引导 动画 的 原则 


引导 动画 由 引导 层 和 被 引导 层 组 成 ， 引 导 层 用 于 放置 对 象 运动 的 轨迹 ， 被 引导 层 用 于 
放置 运动 的 对 象 。 引 导 层 是 Flash 动画 中 的 一 种 特殊 图 层 ， 它 引 导 层 中 运动 的 对 象 ， 运 
动 轨迹 可 以 先 绘制 ， 然 后 在 引导 层 和 普通 层 之 间 建 立 引导 关系 ， 使 普通 层 


变 为 引导 层 ， 使 
动画 沿 绘制 的 轨迹 运动 。 引 导线 的 建立 有 一 定 的 规则 ， 如 果 不 按照 其 规则 操作 ， 将 无 法 成 


功 创建 引导 动画 。 创 建 引导 动画 的 一 些 常见 问题 介绍 如 下 。 
学 ”引导 线 转折 过 急 : 引导 线 的 转折 不 宜 过 多 ， 且 转折 处 的 线条 弯 转 不 宜 过 急 ， 以 免 
Flash 无 法 准确 判定 对 象 的 运动 路 径 ， 如 图 8-11 所 示 。 
学 ”引导 线 中 断 : 引导 线 应 为 一 条 流畅 、 从 头 到 尾 连 续 贯 穿 的 线条 ， 线 条 不 能 出 现 中 
断 的 现象 ， 如 图 8-12 所 示 。 


图 8-11 引导 线 过 急 图 8-12 引导 线 中 断 
党 ”引导 线 交叉 与 重合 : 引导 线 中 的 交叉、 重合 的 现象 不 要 过 多 ， 否 则 有 可 能 影响 动 
画 的 运行 ， 如 图 8-13 所 示 。 
党 ”吸附 引导 线 : 被 引导 对 象 必须 准确 吸附 到 引导 线 上 ， 否 则 被 引导 对 象 将 无 法 沿 引 
导 路 径 运 动 ， 如 图 8-14 所 示 。 
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站 小 魔女 ， 引 导线 其 实 就 是 绘制 N\ 
2 在 引导 层 的 线 ， 在 动画 播放 时 ， iid 
| ”是 不 会 显示 的 。 在 普通 层 中 给 ee J 
样 ， 很 容易 给 


号 引 制 线条 后 ， 右 击 并 选择 相关 命 
日 令 ， 即 可 将 其 转换 成 引导 层 。 多 
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图 8-13 交叉 的 引导 线 图 8-14 吸附 对 象 


8.3.2 如何 创 建 引导 动画 


只 要 熟悉 了 引导 层 和 引导 线 ， 创 建 引导 动画 就 十 分 简单 了 。 下 面 以 “蝴蝶 .fla” 为 例 ， 


讲解 创建 引导 动画 ， 具 体操 作 如 下 : 
步骤] 选择 【文件 ] 代 打开】 命令 ， 在 弹出 的 对 话 框 中 选择 文档 “蝴蝶 .fla” (光盘:\ 


素材 \ 第 8 章 \ 蝴 蝶 .fla) 将 其 打开 ， 如 图 8-15 所 示 。 
步骤 2 在 图 层 1 的 第 60 帧 插入 帧 ， 然 后 选择 图 层 2， 在 第 60 帧 插入 关键 帧 ， 如 图 8-16 


所 示 。 


图 8-15 打开 文档 图 8-16 插入 关键 帧 
步 又 3 将 鼠标 移动 到 图 层 区 中 ， 单 击 涡 按钮 新 建 一 个 引导 图 层 ， 如 图 8-17 所 示 。 
步 又 4 在 工具 箱 中 选择 铅笔 工具 只 ， 将 其 笔触 改 为 “平滑 ”模式 ,在 舞台 中 绘制 一 
条 曲线 ， 如 图 8-18 所 示 。 
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图 8-17 建立 引导 层 图 8-18 建立 引导 线 
步 又 5 选择 图 层 2 第 1 帧 中 的 影片 剪辑 元 件 ， 按 住 其 中 心 点 不 放 ， 将 其 向 引导 线 的 
左 端 移动 ， 当 蝴蝶 图 片 移动 到 左边 端点 将 出 现 一 个 圆 ， 表 示 影 片 剪辑 和 引导 


线 产 生 吸附 ， 如 图 8-19 所 示 。 
步 又 6 在 图 层 3 的 第 60 帧 插入 关键 帧 ,用 相同 的 方法 使 帧 中 的 对 象 吸附 到 引导 线 的 


右 端 ， 如 图 8-20 所 示 。 


本 吸附 对 象 


图 8-19 吸附 对 象 图 8-20 ”新建 关键 帧 并 吸附 对 象 
秒 嗓 7 在 图 层 2 中 的 第 1 帧 到 第 60 帧 右 击 , 在 弹出 的 快捷 菜单 中 选择 “创建 补 间 动 
画 ”命令 创建 动画 补 间 动 画 ， 如 图 8-21 所 示 。 
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步 又 8 按 【Ctrl+Enter]】 键 浏览 动画 效果 ， 发 现 动画 中 的 蝴蝶 飞 的 速度 不 符合 实际 情 
况 ， 如 图 8-22 所 示 。 


图 8-21 选择 命令 图 8-22 ”预览 动画 


步骤 9 返回 到 动画 编辑 界面 中 ， 选 择 图 层 2 中 的 第 60 帧 ， 将 其 移动 到 第 90 帧 的 位 
置 ， 如 图 8-23 所 示 。 

步骤 10 按 【Ctrl+Enter]】 键 再 次 浏览 动画 效果 (光盘 :\ 最 终 效 果 \ 第 8 章 \ 蝴 蝶 .fla) ， 发 
现 蝴蝶 飞 得 很 自然 了 ， 如 图 8-24 所 示 。 


图 8-23 移动 关键 帧 图 8-24 ”预览 动画 
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84 遮 章 动画 


遮 界 动画 也 是 网 页 中 常见 的 动画 之 一 ， 如 我 们 经 常 在 网 上 看 到 的 探照灯 动画 等 都 是 属 
于 遮 四 动画 。 


8.4.1 ” 谈 淖 层 的 原理 


初学 者 可 以 这 样 理解 ， 看 电视 时 眼前 遮 了 块 布 ， 观 众 就 只 能 看 到 没有 遮 住 的 部 分 ， 被 
谈 住 的 将 不 能 看 到 ， 谈 罩 动 画 与 现实 相反 ， 遮 住 的 能 看 到 ， 没 被 庶 住 将 看 不 到 ， 那 块 布 就 
是 特殊 的 图 层 遮 四 层 。 遮 罩 层 也 是 Flash CS3 中 的 一 种 特殊 图 层 ， 在 遮 黯 层 中 用 户 可 绘制 
任意 形状 的 图 形 作为 动画 播放 时 的 外 观 ， 但 遮 单 层 本 身 并 不 会 显示 出 来 。 


8.4.2 如何 创 建 遮 罩 动画 


械 罩 动画 可 以 用 于 许多 特殊 的 场景 ， 如 模仿 灯箱 广告 、 水 波 和 风 吹 动 的 效果 ， 都 是 通 
过 遮 章 来 实现 的 。 创 建 遮 音 的 方法 十 分 简单 ， 下 面 以 “ 遮 音 动画 .fa” 为 例 进行 讲解 ， 有 具体 
操作 如 下 : 
步骤 1 新建 一 个 Flash 文档 ， 将 场景 大 小 设 为 “400 x 400” 像素， 背景 颜色 设置 为 
黑色 ， 如 图 8-25 所 示 。 
步 又 2 单 击 工具 箱 中 的 椭 贺 工具、 线条 工具 和 任意 变形 工具 际 计 ,在 图 层 1 中 绘 
制 背景 图 形 ， 如 图 8-26 所 示 。 


图 8-25 设置 背景 图 8-26 绘制 线条 
步骤 3 按 【CtltF8】 键 ,弹出 “创建 新 元 件 ” 对 话 框 , 在 “名 称 ”文本 框 中 输入 “ 标 
题 ”， 选 中 四 器 下 章 哇 单 选 按钮 ， 如 图 8-27 所 示 。 
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图 8-27 “创建 新 元 件 ” 对 话 框 
步骤 5 在 第 3 帧 处 按 【F7】 键 插入 空白 关键 帧 ， 用 椭圆 工具 绘制 3 个 灰色 的 圆 形 ， 

输入 文字 “ 鹅 ”, 将 其 格式 设置 为 “方正 细 等 线 简体 、 40、 白色 ”, 并 按 【[Ctrl+B】 

键 将 其 打 散 ， 将 其 移动 到 圆 形 图 形 上 方 ， 如 医 


a 第 8 章 动画 让 网 页 更 精彩 
步骤 4 选择 影片 剪辑 元 件 编辑 区 ， 单 击 工具 箱 中 的 椭圆 工具 仿 ， 然 后 在 图 层 1 中 的 
第 1 帧 中 用 椭圆 工具 绘制 3 个 紫色 系列 的 圆 形 ， 如 图 8-28 所 示 。 


病 半 六 


图 8-28 绘制 圆 形 


8-29 所 示 。 


和 步骤 6 在 第 5 帧 处 插入 空白 关键 帧 ,用 椭圆 工具 绘制 
将 其 格式 设置 为 “方正 琥珀 简体 、40、 白 色 ” 
如 图 8-30 所 示 。 


4 个 彩色 的 圆 形 ,输入 文字 “ 鹅 ?， 
， 并 按 【Ctrl+B】 键 将 其 打 散 ， 


8-29 绘制 图 形 1 


图 8-30 绘制 图 形 2 


和 步骤 7 在 第 8 帧 处 插入 空白 关键 帧 ,用 椭圆 工具 绘制 5 个 灰色 的 圆 形 , 输 入 文字 “ 鹅 ”， 


禹 法 


并 法 的 新 手 学 做 网 站 在 


并 按 【Ctrl+B]】 键 将 其 打 散 ， 将 其 移动 到 图 形 上 方 ， 如 图 8-31 所 示 。 
步 又 8 单 击 场景 左上 方 的 国 且 本 按钮 ， 回 到 场景 中 ， 并 将 “标题 ”影片 剪辑 元 件 拖 
入 场景 的 上 方 ， 然 后 在 第 55 帧 处 插入 普通 帧 ， 如 图 8-32 所 示 。 
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图 8-31 绘制 图 形 图 8-32 ”从 库 中 将 元 件 拖 入 场景 中 


步 又 9 ”新建 图 层 2， 在 场景 中 输入 如 图 8-33 所 示 的 文字 ， 将 其 格式 设置 为 “方正 少 
儿 简 体 、38、 白 色 ”， 并 移 至 场景 下 方 。 

步 又 10 在 图 层 2 的 第 55 帧 插入 关键 帧 , 并 在 两 个 关键 帧 之 间 创建 动作 补 间 动 画 , 然 
后 将 第 55 帧 中 的 图 片 向 上 拖 移 至 背景 中 红色 虚线 的 上 方 ， 如 图 8-34 所 示 。 
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图 8-33 输入 文字 图 8-34 调整 文字 
步骤 11 新 建 图 层 3， 选择 矩形 工具 在 场景 中 绘制 一 个 蓝 色 矩形 ， 在 图 层 3 的 第 55 由 
处 插入 普通 帧 ,然后 选取 图 层 3 并 右 击 ,在 弹出 的 快捷 菜单 中 选择 “让 罩 层 ” 
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A 
命令 ， 将 图 层 3 转换 为 让 罩 层 ， 如 图 8-35 所 示 。 


步 又 12 选择 【文件 】/【 保 存 】 命 令 ， 将 其 保存 为 “ 喧 章 动画 .fa” (光盘 \ 最 终 效 果 \ 
第 8 章 \ 遮 单 动画 .fa) 。 
步 又 13 按 【Ctrl+Enter] 键 即 可 预览 制作 好 的 电影 序幕 的 遮 单 效果 ， 如 图 8-36 所 示 。 
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图 8-35 设置 遮 单 层 图 8-36 预览 动画 效果 
EW ¢ 魔法 档案 

对 于 动画 中 常用 到 的 元 素 可 以 将 其 创建 为 元 件 ， 当 用 户 需要 使 用 它 时 ， 打 开 “ 库 ”面板 ， 
选择 其 中 需要 的 元 件 ， 然 后 将 其 拖 入 舞台 即 可 。 


8.5 给 动画 添加 声音 


读者 在 观看 Flash 动画 时 ， 一 定 注意 到 了 很 多 动画 都 添加 了 声音 效果 ， 而 且 为 了 让 动 
画 更 加 丰满 ， 制 作者 还 可 以 为 动画 配置 合适 的 旁白 。 


8.5.1 Flash CS3 支持 的 声音 格式 


Flahs 动画 制作 软件 目前 只 支持 两 种 声音 格式 ,一 种 是 MP3 格式 , 一 种 是 WAV 格式 ， 
其 特点 分 别 介 绍 如 下 : 
党 MP3 格式 : MP3 格式 是 用 户 比较 熟悉 的 一 种 音频 文件 ， 虽 然 采 用 MP3 格式 压缩 
音乐 时 对 文件 有 一 定 的 损坏 , 但 由 于 其 编码 技术 成 熟 ， 音质 比 较 接 近 于 CD 水 平 ， 
且 体 积 小 、 传 输 方便 ， 因 而 受到 广大 用 户 的 青睐。 
党 WAV 格式 : WAV 格式 是 PC 标准 声音 格式 ， 它 直接 保存 了 声音 的 原始 数据 ， 因 
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此 音质 非常 好 ， 但 相对 数据 量 也 很 大 ，Flash 动画 大 多 数 都 是 在 网 络 中 传播 ， 其 动 
画 文件 的 大 小 直接 影响 到 了 动画 的 传播 ， 所 以 在 制作 动画 时 一 般 不 使 用 这 种 格式 
的 声音 文件 。 


8.5.2 ”添加 与 编辑 声音 


在 Flash CS3 中 为 动画 添加 声音 文件 主要 是 为 关键 帧 和 按钮 添加 声音 ， 而 且 添 加 声音 
文件 的 方法 非常 简单 ， 它 和 导入 图 片 类 似 ， 都 是 先 将 声音 导入 到 “ 库 ” 面板 中 ， 然 后 拖 入 
到 动画 中 使 用 。 


1.， 为 关键 帧 添加 声音 


如 果 制 作者 想 让 动画 播放 到 某 帧 或 特定 状态 时 出 现 音乐 效果 ， 可 在 该 位 置 插入 一 个 关 
键 帧 ， 然 后 将 音乐 文件 拖 入 其 中 即 可 。 在 Flash CS3 中 为 动画 添加 声音 的 方法 主要 有 两 种 : 
一 种 是 先 将 声音 文件 导入 到 库 中 ， 然 后 添加 声音 图 层 ， 在 要 播放 声音 的 位 置 拖 入 声音 文件 
即 可 ， 另 一 种 是 选择 要 添加 声音 的 帧 ， 在 “属性 ”面板 中 选择 所 需 声音 文件 ， 将 自动 添加 
声音 。 下 面 以 “盛夏 的 夜 .tla” 光盘 :\ 素 材 \ 第 8 章 \ 盛 夏 的 夜 .Ha) 为 例 进行 讲解 ， 具 体操 
作 如 下 : 

步 又 1 打开 “盛夏 的 夜 .fla” 文档, 选择 【文件 VA【 导 入 【导入 到 库 ] 命 令 将 “ 蝉 .mp3” 

(光盘 : Sash 8 章 \ 蝉 .mp3 ) 导入 到 库 中 ， 如 图 8-37 所 示 。 
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图 8-37 导入 声音 
步 又 2 新建 图 层 9， 在 “ 库 ” 面板 中 选择 “ 蝉 mp3”， 将 其 拖 入 到 舞台 中 ， 如 图 8-38 


所 示 。 
步 又 3 完成 以 上 操作 以 后 ,将 其 保存 (光盘 :\ 最 终 效 果 \ 第 8 章 \ 盛 夏 的 夜 .fla), 按 [Ctrl+ 
Enter】 键 预览 动画 效果 ， 如 图 8-39 所 示 。 
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8-38 导入 声音 8-39 ”最 终 效果 
2 为 按钮 添加 声音 


网 页 的 动画 中 ， 按 钮 是 比较 常用 的 元 件 ， 用 户 可 以 为 按钮 添加 声音 ， 制 作出 生动 的 动 
画 效果 。 按钮 的 制作 将 在 9.3.3 节 中 进行 讲解 , 读者 在 这 里 只 需要 按照 我 们 提供 的 素材 进行 
声音 的 添加 就 可 以 了 ， 具 体操 作 如 下 : 

步骤 1 打开 Flash 文件 “按钮 fla”( 光盘: \ 素 材 \ 第 8 章 \ 按 钮 fla ) ,其 场景 如 图 8-40 


所 示 。 
步 又 2 在 “ 库 ” 面 板 中 双击 按钮 元 件 ， 进 入 按钮 元 件 的 编辑 区 ， 如 图 8-41 所 示 。 
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图 8-40 ”按钮 元 件 图 8-41 按 钥 元 件 编辑 区 
步骤 3 选择“ 弹 起 ” 帧 ， 选 择 【文件 】/【 导 入 】/【 导 入 到 库 】 命 令 ， 弹 出 “导入 
到 库 ” 对 话 框 。 
大 
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步 又 4 在 “导入 到 库 ” 对 话 框 中 选中 需要 的 声音 文件 “环绕 柔和 .WAV” (光盘 : \ 
素材 第 8 章 \ 环 绕 柔 和 .WAV ) , 单 击 L 玩 @@_j 按 钮 将 声音 文件 导入 , 如 图 8-42 
所 示 。 

步骤 5 ”在 “指针 经 过 ” 帧 “属性 ”面板 的 “声音 ”下 拉 列 表 框 中 选取 导入 的 声音 文 
件 ， 在 “效果 ”下 拉 列 表 框 中 选择 “ 淡 入 ”选项 ， 在 “同步 ”下 拉 列 表 框 中 


图 8-42 “导入 到 库 ” 对 话 框 图 8-43 导入 声音 文件 
步骤 6 用 同样 的 方法 为 “指针 经 过 ” 帧 和 “点 击 ” 帧 分 别 添加 “高 调 .WAV” 和 “ 子 
弹 .WAV” (光盘 : \ 素 材 \ 第 8 章 \ 高 调 .WAV、 子 弹 .WAV ) ， 如 图 8-44 所 示 。 
步 又 7 在 “同步 ”区 域 选择 “重复 ”选项 ， 在 文本 框 中 输入 音频 重复 播放 的 次 数 。 
步骤 8 单 击 国术 和 按钮 ， 从 元 件 编辑 区 切换 到 场景 中 。 给 按钮 添加 的 声音 制作 完成 ， 
按 【CtrltEnter】 键 测试 效果 ( 光盘 : \ 最 终 效 果 \ 第 8 章 \ 按 钮 fla ) 。 
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图 8-44 为 其 他 帧 添加 声音 效果 


5 魔力 测试 
当 把 鼠标 移 到 按钮 上 时 ，Flash 就 会 播放 导入 的 声音 。 如 听 不 到 声音 ， 可 在 按钮 编辑 区 中 
单 击 帧 “属性 ”面板 中 的 国 时 -] 按 钮 对 导入 的 声音 进行 调整 。 
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3.， 编辑 声音 


当 导 入 的 声音 不 能 满足 用 户 制作 动画 的 要 求 时 ， 可 在 “属性 ”面板 或 “编辑 封套 ”对 
话 框 中 对 其 进行 编辑 。 在 “属性 ”面板 中 编辑 声音 的 方法 在 前 面 已 经 讲 过 ,这 里 不 再 袭 述 。 
为 了 对 声音 更 加 细致 地 进行 编辑 ， 用 户 可 在 “属性 ”面板 中 单 击 医 &. 按 钮 ， 弹 出 “编辑 封 
套 ” 对 话 框 (如 图 8-45 所 示 ) ， 在 该 对 话 框 中 可 详细 地 设置 动画 的 音频 效果 。 


图 8-45 “编辑 封套 “对 话 框 
在 “编辑 封套 ”对 话 框 的 下 方 有 一 些 按钮 ， 它 们 的 作用 分 别 介绍 如 下 。 
党 单 击 鲁 或 B 掖 钮 可 以 放大 或 缩小 窗口 内 音频 的 显示 效果 。 
党 单 击 四 或 国 按 钮 可 以 改变 时 间 轴 的 单位 . 区 显示 的 单位 为 秒 ， 呈 显示 的 单位 为 帧 。 
党 完成 编辑 后 ， 单 击 “ 播 放 ” 按 钮 了 测试 效果 ， 单 击 到 按钮 终止 播放 。 
在 “编辑 封套 ”对 话 框 中 编辑 声音 的 具体 操作 如 下 : 
步 又 1 选取 音频 层 ， 在 “属性 ”面板 中 单 击 医 号 JJ] 按钮， 弹出 “编辑 封套 ”对 话 杠 
在 区 时 元 ”加 | 下 拉 列 表 框 中 选择 “ 淡 入 ”选项 ， 如 图 8-46 所 示 。 
步 又 2 在 音频 时 间 轴 上 拖 动 起 点 游标 和 终点 游标 改变 音频 的 起 点 和 终点 ， 这 里 将 起 
点 游标 拖 到 “1.0” 的 位 置 ， 如 图 8-47 所 示 。 
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8-46 “ 淡 入 ”选项 声音 编辑 界面 8-47 改变 音频 的 起 点 


步 又 3 用 鼠标 拖 动 控制 柄 , 通过 改变 音量 控制 线 的 位 置 来 编辑 音量 的 大 小 , 这 时 “ 效 
果 ” 下 拉 列 表 框 中 为 “ 自 定义 ”选项 ， 如 图 8-48 所 示 


”魔法 档案 
控制 柄 和 音量 控制 线 的 位 置 位 于 最 上 方 时 ， 播 放 的 音量 最 大 ; 当 控制 柄 和 音量 控制 线 的 位 
首位 于 最 下 方 时 ， 播 放 的 音量 为 堆 。 


步 又 4 用 鼠标 拖 动 控制 柄 上 的 小 滑 块 调整 声音 的 播放 范围 ， 这 里 单 击 音量 线 加 入 两 
个 控制 柄 ， 如 图 8-49 所 示 。 


ED 


图 8-48 编辑 音量 的 大 小 图 8-49 调整 声音 播放 范围 
步骤 5 完成 声音 的 编辑 后 ， 单 击 [ 确 宇 | 按钮 即 可 。 


| 魔法 档案 
在 默认 情况 下 ， 音 量 控制 线 只 有 起 始 位 置 有 控制 柄 ， 但 在 控制 线 上 可 以 增加 控制 柄 。 系 统 
最 多 允许 添加 8 个 控制 柄 ， 用 鼠标 将 控制 柄 向 两 边 拖 出 声音 波形 窗口 即 可 删除 控制 柄 
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8.5.3 设置 声音 的 导出 属性 


声音 的 采样 率 和 压缩 率 对 输出 动画 的 声音 质量 和 文件 大 小 起 着 决定 性 的 作用 ， 要 得 到 
更 好 的 声音 质量 ， 必 须 对 动画 的 声音 多 次 进行 编辑 ， 压 缩 率 越 大 ， 采 样 率 越 低 ， 文 件 的 体 
积 就 会 越 小 ， 但 是 质量 也 会 更 差 ， 用 户 可 根据 实际 需要 对 其 进行 更 改 。 

当 动画 制作 好 时 ， 需 要 设置 单个 音频 的 输出 属性 ， 有 具体 操作 如 下 : 

步 又 1 按 【F11] 键 打开 “ 库 ” 面 板 ， 如 图 8-50 所 示 。 

步骤 2 在“ 库 ”面板 中 右 击 要 输出 的 音频 文件 ， 在 弹出 的 快捷 菜单 中 选择 “属性 ” 
命令 ， 弹 出 “声音 属性 ”对 话 框 。 

步 又 3 在 “压缩 ”下 拉 列 表 框 中 选择 文件 的 格式 ， 如 “MP3”， 在 “比特 率 ” 下 拉 
列表 框 中 设置 声音 的 最 大 传输 速率 ， 在 “品质 ”下 拉 列 表 框 中 选择 “快速 ” 
选项 ， 如 图 8-51 所 示 。 
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图 8-50 “ 库 ” 面板 图 8-51 “声音 属性 ”对 话 框 
步骤 4 单 击 [WzD ] 按 钮 测试 音频 效果 ， 单 击 [ 售 k® ] 按 钮 停止 播放 。 
步 嗓 5 单 击 C 玉 本 按钮 完成 输出 设置 。 


上 魔力 测试 
为 一 个 影片 剪辑 元 件 添加 声音 ， 并 在 “编辑 封套 ”对 话 框 中 设置 “淡出 ”属性 ， 再 把 声音 
压缩 输出 ， 要 注意 调试 编辑 声音 后 的 效果 。 | 


8.6 将 动画 插入 到 网 页 中 去 


Flash 动画 也 有 多 种 格式 ， 插 入 到 网 页 中 的 动画 是 SWF 格式 ， 制 作 完 动画 后 ， 用 户 只 
需 将 影片 发 布 就 可 以 得 到 SWF 格式 的 文件 。 | 
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8.6.1 发 布 动画 


在 Flash CS3 中 制作 好 动画 后 ， 需 要 将 动画 发 布 为 网 页 需要 的 格式 ， 才 能 插入 网 页 中 。 
下 面 以 将 动画 发 布 为 SWF 格式 为 例 进行 讲解 ， 具 体操 作 如 下 : 
步 又 1 打开 制作 的 “日 历 .fla” (光盘 :\ 素 材 \ 第 8 章 \ 制 作 日 历 .fla) 文档 ， 如 图 8-52 


所 示 。 
和 步骤 2 选择 【文件 ] /【 导 出 〗/【 导 出 影片 〗 命 令 ， 如 图 8-53 所 示 。 
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图 8-52 打开 文档 图 8-53 选择 【文件 】/【 导 出 】/【 导 出 影片 】 命 令 
步骤 3 弹出 “导出 影片 ”对 话 框 ， 在 “保存 在 ”下 拉 列 表 框 中 选择 存储 的 位 置 ， 在 
“文件 名 ”下 拉 列 表 框 中 输入 文件 名 , 这 里 保持 默认 设置 ,完成 后 单 击 CaE5 J 

按钮 ， 如 图 8-54 所 示 。 
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图 8-54 “导出 影片 ”对 话 框 


， 这 rs pS 
‘" 坟 一 学 就 会 魔法 * 和 1 


ma/ 第 8 章 ， 动 画 让 网 页 更 精彩 


点 


步 又 4 弹出 “导出 Flash Player” 对 话 框 ， 保 存 默认 设置 不 变 ， 单 击 已 王 _] 按 钮 ， 如 
8-55 所 示 。 

步 又 5 双击 导出 的 文件 ,， 即 可 查看 动画 效果 (光盘 :\ 最 终 效果 \ 第 8 章 \ 制 作 日 历 .fla)， 
如 图 8-56 所 示 。 


4 [em 
8-55 “导出 Flash Player” 对 话 框 8-56 最终 效果 


8.6.2 将 Flash 动画 插入 到 网 页 中 


Flash 动画 制作 完成 后 ， 要 将 其 插入 到 网 页 中 。 插入 到 网 页 的 动画 有 两 个 标准 : 一 是 文 
件 不 能 过 大 ， 二 是 需要 非 中 文 的 文件 名 。 下 面 我 们 在 网 页 中 插入 一 个 Flash 动画 ， 具 体操 
作 如 下 : 

步骤 1 启动 Dreamweaver CS3， 新 建 一 个 名 为 “dhhtml” 的 网 页 ， 选 择 【 插 入 记录 】/ 

【媒体 】/ 【Flash] 命令 ， 如 图 8-57 所 示 。 

步 桑 2 ”弹出 “选择 文件 ?对话 框 查找 需要 的 文件 , 这 里 选择 “gg.swf" 文 档 , 单 击 亡 枉 

按钮 ， 如 图 8-58 所 示 。 


8-58 “选择 文件 ”对 话 杠 
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步骤 3 ”插入 文件 到 网 页 中 ， 选 择 插入 的 Flash 动画 ， 将 出 现 Flash 动画 的 “属性 ” 面 
板 ， 用户 可 以 对 其 动画 属性 进行 设置 ， 如 大 小 ， 品 质 等 ， 如 图 8-59 所 示 。 

步 又 4 设置 完成 后 ， 单 击 区 要 有 &_ 按钮， 将 会 播放 插入 的 动画 ， 如 图 8-60 所 示 。 
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8-59 ”插入 Flash 动画 8-60 ”播放 Flash 动画 


步 驿 5 将 文件 保存 ， 在 浏览 器 中 预览 页 面 效果 ， 如 图 8-61 所 示 (光盘 :\ 最 终 效果 \ 第 
8 章 \dhhtml) 。 
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8-61 ”最终 效果 
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Flash 动画 在 网 页 中 的 应 用 非常 广泛 ， 可 以 用 它 来 制作 网 页 中 的 导航 和 logo。 大 多 数 的 网 
页 广告 都 是 通过 动画 来 完成 的 ， 初 学 者 可 以 用 动画 来 修饰 网 页 ， 但 是 其 设计 风格 一 定 要 与 网 页 吻合 ， 


只 有 这 样 网 页 才 会 更 精彩 。 
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8.7 典型 实例 一 一 “ 爱 你 最 珍贵 ”网 页 动画 


网 页 的 动画 种 类 虽然 很 多 ， 但 是 常用 的 只 有 几 种 ， 读 者 朋友 只 需 掌握 本 章 所 列举 的 动 
画 ， 就 可 以 制作 出 漂亮 的 网 页 动画 了 。 下 面 制作 “ 爱 你 最 珍贵 ” 


所 示 。 
当 无 标题 文档 - crosoft Internet Explorer 
文件 四 “ 绩 竹 四 查看 收 戌 和 工具 中 天 及 如 
四 二 -四 - 国 国 狂放 周到 wx 加 | 所 -有 
地 址 四 ) 图 Mtp://127.0.0. yeysiteflower hual Ya Ha Om 加 
* 
EEE 
图 8-62 最 终 效果 
具体 操作 如 下 : 
和 步骤 1 打开 动画 文档 “你 最 珍贵 fla” (光盘 :\ 素 材 \ 第 8 章 \ 你 最 珍贵 .fla) ,将 其 另存 
到 自己 的 电脑 中 并 命名 为 “你 最 珍贵 ”。 
步骤 2 单 击 时 间 轴 左下 角 的 国 按 钮 新 建 图 层 2， 从 “ 库 ” 面 板 中 将 名 称 为 “ 信 
封 ”的 图 形 元 件 拖 到 场景 右上 角 ， 如 图 8-63 所 示 。 
步骤 3 在 第 17 帧 插入 关键 帧 ,在 第 1 帧 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “创建 补 
间 动 画 ”命令 创建 补 间 动画 。 
步 又 4 单 击 时 间 轴 左下 角 的 蔓 按 钮 新 建 “ 引 导 层 ”， 按 【Y]】 键 切换 到 铅笔 工具 几 ， 


™ 


动画 ， 最 终 效 果 如 图 8-62 


在 场景 中 绘制 一 条 曲线 ， 如 图 8-64 所 示 。 
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图 8-63 选择 元 件 图 8-64 绘制 引导 线 


步骤 5 单 击 图 层 2 中 的 第 1 帧 ， 将 场景 中 的 图 像 缩 小 并 设置 透明 度 为 “0” (在 “ 属 
性 ”面板 中 进行 设置 ) ， 并 将 其 中 心 点 放置 在 引导 线 顶 部 。 

和 步骤 6 单 击 图 层 2 中 的 第 17 帧 , 将 场景 中 的 图 像 放大 一 些 , 并 将 其 拖 动 到 引导 线 底 
部 (中心 点 一 定 要 放置 在 引导 线 上 ) ， 如 图 8-65 所 示 。 

和 步骤 7 在 图 层 2 中 选择 18 帧 到 45 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “删除 帧 

命令 ， 如 图 8-66 所 示 。 
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步 又 8 单 击 引导 层 ， 再 单 击 时 间 轴 左下 角 的 园 按钮 新 建 图 层 4， 在 新 建 图 层 的 第 19 
帧 上 单 击 ， 并 按 【F6] 键 插入 关键 帧 ， 从 “ 库 ” 面 板 中 将 名 称 为 “打开 的 信 
封 ” 的 影片 剪辑 元 件 拖 入 到 场景 中 。 

步 又 9 单 击 图 层 2 第 17 帧 场景 中 的 “信封 图形 元 件 , 打开 “属性 ”面板 , 记 下 “ 宽 ”、 
“高 ” 及 “X”、“Y” 值 ， 再 将 “图 层 4” 第 20 帧 中 的 “打开 的 信封 ” 影 
片 剪辑 元 件 的 属性 设置 为 相同 值 。 

步 又 10 使 用 相同 的 方法 删除 图 层 3 中 第 29 帧 及 其 后 的 所 有 帧 , 此 时 的 时 间 轴 及 场景 
中 显示 的 效果 如 图 8-67 所 示 。 

步 桑 11 新建 “图 层 3”， 在 第 23 帧 插入 关键 帧 ， 从 “ 库 ” 面 板 中 将 名 称 为 “红心 ” 
的 图 形 元 件 拖 入 到 场景 中 的 信封 上 ， 按 【CtrltB】 键 将 “红心 ” 打 散 ， 如 
图 8-68 所 示 。 
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图 8-67 设置 打开 信封 的 动画 图 8-68 拖 入 “红心 ”图 形 元 件 
步骤 12 在 “属性 ”面板 的 “ 补 间 ”下 拉 列 表 框 中 选择 “形状 ”选项 创建 形状 补 间 动 
画 ， 在 图 层 5 的 第 27 帧 插入 关键 帧 ， 在 第 33 帧 插入 空白 关键 帧 ， 从 “ 库 ? 
面板 中 将 名 称 为 “ 爱 ” 的 图 形 元 件 拖 入 到 场景 右 下 角 ， 按 【CtlH+B]】 键 将 其 
打 散 ， 如 图 8-69 所 示 。 
步骤 13 单 击 图 层 5 第 23 帧 场景 中 的 “红心 ”图 形 元 件 ， 将 其 缩小 ， 如 图 8-70 所 示 。 


5 
魔力 测试 
新 建 一 个 文档 ， 在 第 1 帧 插入 方形 ， 在 第 60 帧 插入 图形 ， 然 后 创建 形状 补 间 动 画 ， 然 后 
播放 动画 ， 让 方形 逐渐 变 成 圆 形 -。 
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图 8-69 创建 补 间 动画 图 8-70 修改 大 小 


步 桑 14 创建 图 层 6， 在 第 34 帧 插入 关键 帧 ， 从 “ 库 ” 面 板 中 将 名 称 为 “你 最 珍贵 
的 图 形 元 件 拖 入 到 场景 中 “ 爱 ” 图 形 中 心 处 ， 如 图 8-71 所 示 。 

步 桑 15 在 第 37 帧 插入 关键 帧 , 将 场景 中 的 图 形 元 件 等 比例 放大 ,并 移动 到 场景 左 侧 ， 

如 图 8-72 所 示 。 
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图 8-71 拖 入 “你 最 珍贵 ”图 形 元 件 图 8-72 调整 图 形 元 件 大 小 及 位 置 
步 又 16 在 图 层 6 第 34 巾 上 单 击 :并 创建 补 间 动画 。 
和 步骤 17 新 建 图 层 7， 在 第 34 帧 插入 关键 帧 ， 从 “ 库 ” 面 板 中 将 名 称 为 “ 圆 ” 的 图 形 
元 件 拖 入 到 场景 中 “你 最 珍贵 ”的 上 方 ， 如 图 8-73 所 示 。 
步 又 18 在 第 37 帧 插入 关键 帧 , 将 场景 中 的 图 形 元 件 等 比例 放大 , 并 移动 到 场景 左 侧 
“你 最 珍贵 ”的 上 方 (一 定 要 将 其 遮盖 完 ) ， 如 图 8-74 所 示 。 
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图 8-73 拖 入 “ 圆 ” 图 形 元 件 图 8-74 调整 图 形 元 件 大 小 及 位 置 
步 又 19 在 图 层 7 第 34 帧 上 单 击 ， 并 创建 补 间 动 画 。 
步骤 20 选中 图 层 7 第 34 帧 到 37 帧 并 右 击 , 在 弹出 的 快捷 菜单 中 选择 “复制 帧 ”命令 。 
步骤 21 新 建 图 层 8， 选 中 第 34 帧 到 37 帧 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “粘贴 
帧 ”命令 粘贴 复制 的 帧 。 
步 又 22 在 图 层 8 图 层 名 称 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “让 音 层 ”命令 将 其 设 
置 为 让 单 层 ， 此 时 时 间 轴 的 显示 如 图 8-75 所 示 。 
步骤 23 在 图 层 6 上 按 住 鼠 标 左 键 不 放 ， 向 上 拖 动 到 图 层 7 下 方 释放 鼠标 左 键 ， 将 图 
层 6 也 设置 为 被 遮 单 层 ， 如 图 8-76 所 示 。 
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图 8-75 ”建立 遮 罩 层 后 的 效果 图 8-76 ”增加 被 遮 罩 层 


步 又 24 按 【CtrltEnter】 键 测试 动画 ， 选择 【文件 】/【 保 存 】 命 令 , 保存 源 文件 ( 光 
人 盘 :\ 最 终 效果 \ 第 8 章 \ 你 最 珍贵 fla) 。 
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步 又 25 选择 【导出 】/【 导 出 影片 〗 命 令 ， 将 Flash 动画 导出 为 影片 的 播放 格式 ， 如 
图 8-77 所 示 。 

步 又 26 弹出 “导出 影片 ”对 话 框 ， 选 择 存储 位 置 ， 并 将 文件 命名 为 “love” (光盘 :\ 
最 终 效果 \ 第 8 章 \love.fla) ， 单 击 LEES 按钮 ， 如 图 8-78 所 示 。 
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8-77 选择 命令 图 8-78 “导出 影片 ”对 话 框 
步 又 27 弹出 “导出 Flash Player” 对 话 框 ， 保 持 默认 设置 不 变 ， 单 击 书 驼 按钮 ， 如 
图 8-79 所 示 。 
和 步骤 28 关闭 Flash CS3, 启动 Dreamweaver CS3, 新 建 一 个 名 为 “lover.html” 的 网 页 ， 
选择 【插入 记录 】/【 媒 体 】/【Flash] 命令 ， 如 图 8-80 所 示 。 
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图 8-79 “导出 Flash Player” 对 话 框 8-80 选择 命令 


DN s 


~ pr ry 四 
攻 EE 


As 


好 / 第 8 章 ， 动 画 让 网 页 更 精彩 


步 又 29 弹出 “选择 文件 ”对 话 框 ， 选 中 需要 插入 的 动画 文件 ， 单 击 书 旺 ] 按 钮 ， 
如 图 8-81 所 示 。 

步 又 30 在 弹出 的 对 话 框 中 继续 单 击 斑 酶 按钮 , 用 户 可 以 在 “属性 ”面板 中 对 Flash 
动画 进行 设置 ， 单 击 EE_BR 按钮 预览 动画 的 播放 效果 ， 如 图 8-82 所 示 。 


tn Bo GA 本 We | CE 


图 8-81 “选择 文件 ”对 话 框 图 8-82 播放 动画 
步骤 31 将 网 页 保存 ， 按 【F12] 键 预 览 页 面 ， 得 到 如 图 8-62 所 示 的 最 终 效果 (光盘 
最 终 效果 \ 第 8 章 \loverhtml) 。 


8.8 常见 问题 解答 


向: 魔法 师 ， 我 在 使 用 Flash CS3 时 ， 总 是 在 不 经 意 间 将 对 象 插入 到 了 其 他 层 ， 有 没有 
办 法 让 对 象 准确 地 插入 到 需要 的 图 层 中 ? 


人 hi: 这 是 初学 者 常 遇 到 的 问题 ， 用 户 可 以 将 不 需要 插入 对 象 的 图 层 选 中 ， 单 击 “ 锁 定 ” 
按钮 合 ， 将 图 层 锁 住 ， 锁 住 的 图 层 不 能 进行 任何 编辑 ， 因 此 只 需要 锁 住 不 需要 编辑 
的 图 层 , 再 插入 对 象 , 就 可 以 将 对 象 准确 地 插入 到 需要 的 图 层 中 。 若 需要 重新 编辑 ， 
只 需 再 次 单 击 “锁定 ”按钮 鱼 将 其 解锁 即 可 。 


| 
仆 ， 谋 法师 ， 有 一 个 图 片 ， 我 需要 重复 使 用 ， 可 我 导入 的 次 数 很 多 ， 有 没有 更 简单 的 方 
法 ， 只 需 将 图 片 导入 一 次 就 可 以 呢 ? | 

| 


pe 有 啊 ! 方法 是 选择 【文件 】/【 导 入 】/【 导 入 到 库 】 命 令 ， 将 素材 导入 到 库 里 面 ， 


; 
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若 需 要 编辑 动画 时 ， 直 接 从 库 中 拖 出 即 可 ， 这 样 可 以 尽量 降低 动画 的 存储 空间 。 


89 过 关 人 练习 


(1) 创建 一 个 补 间 动 画 ， 绘 制 一 个 圆 ， 然 后 在 第 45 帧 处 绘制 一 个 正方 形 ， 让 这 个 圆 
逐渐 变 为 正方 形 (光盘:\ 最 终 效 果 \ 第 8 章 \ 补 间 动 画 .ha) 。 
(2) 绘制 一 个 小 球 ， 然 后 新 建 一 个 引导 层 ， 绘 制 一 个 曲线 ， 让 这 个 小 球 沿 着 曲线 


运动 。 

(3) 打开 网 页 广告 (光盘 :\ 素 材 \ 第 8 章 \ 网 页 广告 .swf) ， 这 是 一 个 人 才 网 在 其 他 门户 
网 站 打 的 广告 ， 是 利用 Flash 制作 的 ， 利 用 本 章 的 知识 ， 制 作 一 个 类 似 的 网 页 广告 动画 ， 
如 图 8-83 所 示 。 
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图 8-83 网 页 广告 


让 你 的 网 站 别 具 光 芒 


配色 方案 

设计 Logo 

设计 网 站 的 导航 

网 页 中 常见 的 广告 

典型 实例 一 一 让 网 页 的 广告 


魔法 师 : 


小 魔女 : 


魔法 师 : 


小 魔女 : 


网 1 多 霸 体 教学 演示 : 20 分 外 


小 魔女 ， 通 过 前 面 的 学 习 你 应 
该 已 经 可 以 制作 一 个 网 站 了 。 
是 吗 ， 那 我 就 试 着 制作 一 个 属 
于 自己 的 网 站 看 看 。 
别 着 急 ， 在 制作 网 站 时 谁 都 希 
望 自己 的 网 站 别 具 光 芒 ， 与 众 
同 ， 你 也 不 例外 吧 ! 
嗯 ， 是 的 ， 我 不 希望 自己 的 网 
页 和 别人 一 样 ， 就 好 比 穿 衣服 
一 样 ， 我 喜欢 选择 有 个 性 的 款 
式 。 可 是 怎样 才能 让 网 站 有 个 
性 呢 ? 


: 别 着 急 ， 下面 就 讲 讲 如 何 制作 


有 个 性 的 网 站 , 使 它 别 具 光 芒 。 
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9.1 配色 方案 


对 于 网 页 色彩 的 完美 措 配 ， 如 果 你 是 一 个 图 形 艺术 设计 师 ， 那 简直 就 是 小 菜 一 碟 ， 但 
对 于 初学 者 来 说 可 能 会 挖空心思 , 其 实 网 页 配色 也 有 一 定 的 规律 可 循 , 就 算是 一 个 初学 者 ， 
相信 你 在 学 习 了 下 面 的 内 容 后 也 会 有 所 心得 。 


9.1.1 


根据 形容 词 配色 


使 用 形容 词 来 描述 对 颜色 的 感觉 ， 如 狂热 的 红色 、 纯 洁 的 白色 。 在 生活 中 ， 人 们 不 但 
用 形容 词 表达 颜色 ， 而 且 还 用 其 表达 心理 感受 ， 如 “漂亮 ”、“ 和 干净 ”、“ 整 洁 ” 等。 在 
评估 一 个 站 点 时 ， 我 们 会 使 用 形容 词 表 达 心理 感受 ， 其 中 起 着 关键 作用 的 莫 过 于 网 页 使 用 
颜色 方案 的 优 劣 。 几 种 常见 的 形容 词 配色 方案 介绍 如 下 : 


,4 


自然 的 : 有 一 种 回归 自然 的 感觉 ， 而 这 种 感觉 是 通过 自然 色 配合 而 成 ， 浏 览 者 济 
览 这 样 的 网 页 会 达到 一 种 置身 农场 的 感觉 。 配色 方案 建议 使 用 黄土 颜色 造 出 大 自 
然 气氛 ， 再 使 用 低 对 比 度 的 绿色 和 深 黄 色 添加 安详 宁静 而 又 高 贵 的 气氛 。 

现代 的 : 人 们 将 大 都 市 中 使 用 最 多 的 单纯 而 又 老练 的 颜色 称 之 为 现代 的 颜色 。 现 
代 城 市 中 ， 常 利用 灰色 、 和 白色、 红色 、 黑 色 以 及 绿色 结合 使 用 ， 从 而 达到 现代 文 
明 效果 。 

亲切 的 : 该 类 站 点 建议 使 用 明亮 的 黄色 和 相同 色调 的 粉色 、 天 蓝 色 的 搭配 ， 可 以 
在 里 面 使 用 少许 灰色 ， 这 样 可 以 达到 精炼 而 亲切 的 双重 效果 。 

活泼 的 : 这 种 网 站 大 多 是 少儿 网 站 ， 这 种 网 站 很 自然 地 产生 出 一 种 愉快 活泼 的 感 
觉 ， 它 可 以 是 高 亮 的 黄色 、 黄 绿色 、 橙 色 等 鲜艳 的 颜色 来 实现 。 如 果 在 导航 中 使 
用 较 暗 的 蓝 柴 色 ， 可 使 华丽 的 外 表 添加 一 种 稳重 的 感觉 。 

女性 化 的 : 通常 女孩 子 会 比较 喜欢 粉红 色 ， 而 男孩 子 会 选择 天 蓝 色 ， 这 种 说 法 虽 
然 很 过 时 ， 但 红色 系列 永远 是 可 以 最 佳 地 体现 出 女性 特色 ， 如 果 需 要 一 种 颜色 来 
表现 出 女性 化 的 感觉 ， 人 们 自然 的 会 想到 粉红 色 和 淡 紫 色 等 。 

爽朗 的 : 当 看 到 运动 员 在 运动 场 上 表现 时 ， 我 们 会 感觉 非常 夹 衣 ， 而 看 到 年 轻 人 
身 着 一 身 轻 便 的 运动 服 ， 我 们 也 会 感觉 夹 朗 ， 要 营造 出 这 种 感觉， 在 配色 上 一 定 
要 选取 比较 淡 的 颜色 。 

西方 古典 的 : 由 于 东西 方 文化 背景 不 同 ， 东 西方 惯用 的 颜色 也 不 同 ， 西 方 古典 式 
的 风格 通常 是 咖啡 色 ， 然 后 再 搭配 上 褐色 和 绿色 营造 出 古典 的 气息 

柔和 的 : 精致 的 羊 线 衫 、 轻 轻 吹 拂 脸 正 的 春风 ， 婴 儿 滑 妖 的 肌肤 都 给 我 们 一 种 非 
常 柔和 的 感觉 ， 而 在 需要 得 到 柔和 效果 的 配色 方案 中 主要 使 用 隐约 的 、 清 淡 的 蜡 
笔 型 颜色 。 
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9.1.2 ”根据 色相 配色 


每 个 人 都 有 自己 喜欢 的 颜色 ， 有 些 人 喜欢 可 爱 的 黄色 ， 而 有 些 人 喜欢 神秘 的 紫色 。 不 

同 的 年 龄 、 不 同 的 性 别 和 不 同 的 工作 也 会 导致 人 们 有 不 同 的 颜色 偏好 ， 但 是 颜色 给 每 一 个 

人 的 感觉 却 是 大 同 小 异 的 ， 例 如 鲜明 的 红色 、 黄 色 和 蓝 色 给 人 一 种 爽朗 轻快 的 感觉 。 下 面 

根据 设计 者 的 经 验 ， 谈 谈 根据 色相 配色 中 各 颜色 给 人 的 感觉 ， 分 别 介绍 如 下 : 

党 红色 : 在 整个 人 类 发 展 史 中 ， 红 色 始 终 代表 一 种 特殊 的 力量 与 权势 ， 同 时 他 与 鲜 
血 、 火 焰 、 危 险 、 战 争 、 狂 热 联系 在 一 起 ， 与 它 搭配 的 颜色 有 黑色 、 橙 色 、 草 绿 
色 、 蓝 色 、 紫 色 等 。 

党 查 色 : 橙色 通常 会 给 人 一 种 朝气 活 小 的 感觉 。 在 东方 文化 中 ， 橙 色 和 象征 着 爱情 和 

幸福 ， 充 满 活力 的 颜色 会 给 人 健康 的 感 党 ， 它 常常 与 黄色 、 黄 绿色 搭配 。 

% 绿色 : 绿色 是 网 页 中 使 用 较为 广泛 的 颜色 之 一 ， 绿 色 常 使 人 们 心情 格外 明朗 ， 用 
户 在 使 用 时 ， 可 将 此 颜色 和 黄色 、 橙 色 、 红 色 等 搭配 。 

党 蓝 色 : 很 多 站 点 都 在 使 用 蓝 色 ， 最 具 其 代表 性 的 莫 过 于 海水 和 蓝天 ， 这 两 种 物体 
给 人 一 种 清凉 的 感觉 。 蓝 色 和 青绿 色 、 白 色 搭配 使 整个 网 站 看 起 来 非常 干净 清澈 。 

ss 蓝 紫 色 : 蓝 紫 色 的 色相 位 于 蓝 色 和 紫色 之 间 ， 所 以 蕴含 了 紫色 的 一 些 神秘 的 感觉 
低 亮 度 的 蓝 紫 色 显 得 十 分 有 分 量 ， 而 高 亮度 的 蓝 紫 色 显 得 非常 高 雅 ， 网 页 中 蓝 紫 
色 通常 与 蓝 色 一 起 搭配 使 用 。 

避 紫色 : 紫色 通常 用 于 女性 对 象 或 以 艺术 作品 为 主 的 站 点 ， 但 是 很 多 大 公司 的 站 点 
也 喜欢 使 用 包含 神秘 色彩 的 紫色 ， 较 暗 的 紫色 可 以 表现 出 成 熟 的 感觉 ， 但 女性 站 
点 使 用 的 通常 都 是 清澈 的 紫色 。 

党 ”紫红 色 : 清澈 色调 的 紫红 色 又 称 粉红 色 ， 粉 红色 主要 用 于 女性 站 点 ， 粉 红色 能 够 
表现 出 可 爱 与 球 巧 的 感觉 ， 所 以 人 们 也 通常 在 背景 色 或 在 页 面 较 大 的 范围 内 使 用 
该 色 。 紫 红色 给 人 们 的 感觉 是 浪漫 、 和 柔和、 华丽、 高贵 优雅。 


9.2 设计 Logo 


Logo 设计 是 品牌 形象 设计 的 核心 因素 , 已 经 成 为 企业 品牌 策划 的 热点 。 拥有 一 款 优秀 
的 Logo， 可 以 使 品牌 视觉 形象 如 虎 添 翼 ， 可 以 让 目标 客户 更 喜欢 企业 品牌 ， 以 至 于 更 喜欢 
公司 的 产品 和 服务 ， 从 而 促进 销售 ， 加 快 企业 的 发 展 步伐 。 从 某 种 程度 上 讲 ， 行 业内 谁 先 
拥有 了 好 的 Logo 设计 ， 谁 就 抢占 了 先 机 。 

Logo 设计 一 般 是 按 标识 性 手法 、 卡 通化 手法 和 几何 形 构成 法 制作 ， 其 特点 分 别 介绍 
如 下 。 


4 
人 


标识 性 手法 : 用 标志 、 文 字 、 字 头 字母 的 表 音 符号 来 设计 Logo。 

% 卡通 化 手法 : 通过 夸张 、 幽 默 的 卡通 图 像 来 设计 Logo。 

% 几何 形 构成 法 : 是 用 点 、 线 、 面 、 方 、 国 、 多 边 形 或 三 维 空间 等 几何 图 形 来 设计 
Logo。 当 然 ， 设 计时 往往 是 以 一 种 手法 为 主 ， 几 种 手法 交错 使 用 。 
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As 法 
‘2 新 手 学 做 网 站 ” 


人 要 想 设 计 出 一 个 漂亮 的 Logo 是 非常 困难 的 。 
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保持 视觉 平 人、 讲 完 线 条 的 流畅， 使 整体 形状 美观 。 
用 反差 、 对 比 或 边框 等 强调 主题 。 
选择 恰当 的 字体 。 
注意 留 白 ， 给 人 想象 空间 。 
运用 色彩 ， 因 为 人 们 对 色彩 的 反映 比 对 形状 的 反映 更 为 敏锐 和 直接 ， 更 能 激发 
情感 。 
初学 者 刚 开 始 很 难 理解 这 些 概念 , 可 以 通过 观察 一 些 著名 网 站 的 Logo, 从 而 理解 Logo 
的 设计 ， 从 中 获取 灵感 ， 如 图 9-1 所 示 为 几 个 著名 网 站 的 Logo。 
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9-1 国内 知名 网 站 的 logo 设计 


ee， 


名 


te 


9 


te 


9.3 设计 网 站 的 导航 


导航 栏 的 作用 是 引导 浏览 者 进行 网 页 浏览 ， 根 据 导航 栏 放置 的 位 置 可 分 为 横 排 和 竖 排 
两 种 ;根据 表现 形式 ， 导 航 栏 有 图 片 导航 、 文 本 导航 和 框架 导航 等 ， 导 航 栏 也 可 以 是 动画 
的 ， 如 用 脚本 编写 的 导航 栏 或 Flash 导航 栏 。 


9.3.1 文字 导航 


文字 导航 主要 用 于 大 型 网 站 中 ， 它 通常 位 于 网 页 的 左上 角 或 者 右上 角 ， 这 是 比较 显眼 
的 位 置 。 导 航 的 制作 一 般 是 通过 布局 划一 块 区 域 ， 然 后 输入 文字 ， 通 过 CSS 样式 表 ， 对 导 
航 栏 的 文字 进行 设置 。 国 内 的 知名 网 站 如 搜狐 、 新 浪 和 网 易 等 都 是 采用 这 样 的 方式 制作 网 
站 导航 的 ， 如 图 9-2 所 示 。 


新 浪 网 新 闻 军事 社会 体育 Fl 奥运 博客 名 坦 排行 读书 教育 高 着 空间 W 邮箱 城市 广东 上 海 火炬 站 杂志 导航 
SJNa.com.cn 财 竖 股票 基金 娱乐 电视 音乐 视频 播客 TY 女性 星座 育儿 论坛 圈子 相册 企业 分 类 商城 高 尔 夫 天 气 笑 问 
重庆 大 多 云 31C~24C 科技 手机 数 吗 汽车 购车 搜 车 房产 家 居 旅游 乐 库 尚 品 梁 康 交友 游戏 WE 短信 条 办 彩信 音 倍 汇 公益 委 答 


图 9-2 文字 导航 


9.3.2 图片 导 航 
图 片 导航 也 是 一 种 常见 的 导航 ， 它 摆脱 了 文字 导航 的 单调 性 ， 让 导航 变 得 更 生动 ， 通 


过 图 片 来 表示 单 击 过 后 将 会 出 现 什么 样 的 栏目 。 不 过 ， 在 设计 的 时 候 ， 人 们 通常 会 用 文字 
说 明 鼠 标 单 击 后 将 出 现 什么 栏目 ， 如 国内 知名 网 站 电脑 报 的 官方 网 站 就 是 采取 这 种 导航 ， 
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如 图 9-3 所 示 。 
各 动 证 旋 | 芭 | 岛 知 外 和 oo 芭 息 | 全 | 人 时 
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图 9-3 图 片 导航 
图 片 导航 的 制作 也 十 分 简单 ， 读 者 可 以 搜集 图 片 素材 ， 通 过 本 书 第 7 章 所 学 的 知识 ， 
然后 制作 出 漂亮 别致 的 图 片 导 航 。 
9.3.3 动画 导航 


动画 给 网 页 带 来 的 魅力 不 言 而 喻 ， 在 导航 的 领域 里 ,动画 导航 适合 于 中 小 型 企业 的 网 
站 和 个 人 网 站 ， 国 内 的 大 型 网 站 里 ， 很 难看 到 它们 会 用 动画 导航 ， 所 以 动画 是 设计 者 追求 
个 性 和 时 尚 的 产物 。 如 图 9-4 所 示 为 动画 导航 。 
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图 9-4 动画 导航 
动画 导航 是 怎么 完成 的 呢 ? 初学 者 一 定 感觉 很 难 制作 吧 ! 其 实 动画 导航 的 实现 并 不 复 
杂 ， 大 多 是 采用 在 Flash 中 创建 按钮 来 完成 的 。 下 面 将 讲解 动画 的 导航 制作 方法 ， 具 体操 


作 如 下 : 
步 又 1 启动 Flash CS3， 新 建 一 个 空白 文档 ， 选 择 【 插 入 〗/【 新 建 元 件 〗 命 令 ， 如 
图 9-5 所 示 。 
步骤 2 弹出 “创建 新 元 件 ” 对 话 框 , 在“ 名称” 文本 框 中 输入 “导航 ”， 选 中 加 按钮 
单 选 按钮 ， 并 单 击 亡 旺 按钮 ， 如 图 9-6 所 示 。 
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图 9-5 选择 命令 图 9-6 “创建 新 元 件 ”对 话 框 
步骤 3 ”在 工具 箱 中 选择 矩形 工具 国 ， 在 “属性 ”面板 中 将 角 设 置 为 圆 角 ， 在 舞台 中 
绘制 一 个 长 方形 ， 如 图 9-7 所 示 。 
步骤 4 在 “指针 经 过 ” 帧 上 右 击 ， 在 弹出 快捷 菜单 中 选择 “插入 关键 帧 ”命令 ， 如 
图 9-8 所 示 。 
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图 9-7 绘制 矩形 图 9-8 插入 关键 帧 


步 桑 5 在 工具 箱 中 ， 将 颜料 桶 工具 念 设置 为 “绿色 ”， 单 击 鼠 标 为 图 形 填充 颜色 
在 “ 按 下 ” 帧 中 插入 关键 帧 ， 并 为 图 形 填充 为 “红色 ”， 如 图 9-9 所 示 。 

步 又 6 新 建 图 层 2， 在 工具 箱 中 选择 文字 工具 了 ， 在 “属性 ”面板 中 设置 文字 的 字 
体 为 “方正 少儿 简体 ”， 字 号 为 “23” 号 ， 颜 色 为 “黑色 ”， 并 在 图 形 中 输 
入 文本 “首页 ”， 如 图 9-10 所 示 。 
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图 9-9 填充 颜色 图 9-10 输入 文字 
步骤 7 按照 相同 的 方法 ， 新 建 其 他 按钮 ， 然 后 将 其 拖 入 场景 中 ， 如 图 9-11 所 示 。 
步骤 8 按 【CtrltEnter】 键 预览 动画 播放 效果 ( 光盘 : \ 最 终 效 果 \ 第 9 章 \ 导 航 条 .fla ) ， 
如 图 9-12 所 示 。 
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图 9-11 将 元 件 拖 入 场景 中 图 9-12 预览 动画 


和 步骤 9 返回 到 Dreamweaver CS3 中 选择 【文件 】/【 导 出 】/【 导 出 影片 〗 命 令 ， 即 
可 将 Flash 动画 作为 导航 条 插入 到 网 页 中 。 


】 ”魔法 档案 
WW Flash 导航 都 是 由 许多 按钮 组 成 ， 一 个 按钮 元 件 中 只 有 4 个 帧 ， 也 就 是 说 ， 你 可 以 将 按钮 
设置 成 4 个 不 同 的 状态 ， 新 建 完成 后 ， 将 其 拖 入 场景 中 整齐 地 摆 放 ， 然 后 在 时 间 轴 上 建立 链接 ， 建 
立 链接 时 需要 使 用 ActionScript 3.0， 读 者 有 兴趣 可 以 找 相关 资料 进行 学 习 ， 这 里 不 再 丙 述 。 
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六 新 手 学 做 网 站 
9.4 网 页 中 常见 的 广告 


告 是 网 页 中 常见 的 元 素 ， 许 多 国内 门户 网 站 都 靠 广告 盈利 ， 如 新 浪 、 搜 狐 等 网 站 ， 
广告 是 页 面 的 一 部 分 ， 它 必须 遵从 网 页 的 整体 设计 要 求 。 


9.4.1 网 页 中 的 Flash 广告 


Flash 广告 是 目前 网 站 中 使 用 最 多 的 广告 形式 , 随便 打开 一 个 网 页 , 都 会 有 许多 的 Flash 
告 ， 如 图 9-13 所 示 。 
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9-13 Flash 广告 


Flash 广告 有 以 下 特点 : 

党 ”动画 时 间 不 能 太 长 : 因为 浏览 者 在 此 网 页 的 停留 时 间 不 会 很 长 ， 所 以 Flash 广告 
必须 很 短 ， 让 浏览 者 在 较 短 的 时 间 看 完 动画 。 

学 ”动画 一 定 要 简单 : 动画 设计 的 目的 是 吸引 眼球 , 吸引 眼球 不 一 定 需要 复杂 的 动画 ， 
复杂 的 动画 不 适合 网 页 广告 。 

人 党 动画 颜色 比较 单一 : Flash 广告 动画 是 比较 单一 的 ， 如 图 9-13 所 示 的 广告 ， 左 色 
都 比较 单一 ， 但 是 看 上 去 却 十 分 大 气 、 专 业 ， 因 此 Flash 广告 动画 不 宜 用 太 多 的 
颜色。 

党 ”Flash 动画 放 在 适合 的 位 置 : Flash 广告 在 网 页 中 的 位 置 十 分 重要 , Flash 广告 可 以 
放 在 两 个 板块 之 间 ， 如 “导航 ”和 “搜索 ”两 个 板块 之 间 。 
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9.4.2 ”网 页 中 的 图 片 广告 


网 页 中 的 图 片 广告 属于 平面 广告 范畴 ， 所 以 平面 广告 的 设计 要 求 也 是 网 页 中 图 片 广告 
的 要 求 。 网 页 中 图 片 广告 在 日 益 发 展 的 互联 网 中 ， 没 有 了 昔日 霸主 的 地 位 ， 但 是 仍 有 许多 
网 站 在 应 用 ， 如 图 9-14 所 示 。 
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图 9-14 图 片 广告 


网 页 中 的 图 片 广告 是 静止 的 ， 在 规定 的 图 片 大 小 中 ， 要 能 很 快 起 到 宣传 的 作用 ， 这 可 

能 是 初学 者 比较 头痛 的 要 求 ， 但 是 也 有 规律 可 循 ， 分 别 介绍 如 下 
党 ”网 页 广告 要 具备 宽广 的 文化 视角 : 力求 设计 作品 对 社会 有 益 ， 能 提高 人 们 的 审美 
能 力 ， 使 人 们 心理 上 能 得 到 愉悦 和 满足 ， 应 概括 当代 的 时 代 特 征 ， 反 映 真 正 的 审 
美 情趣 和 审美 理想 。 起 码 设计 者 应 当 明 白 ， 优 秀 的 设计 师 有 他 们 “自己 ”的 手法 、 
清晰 的 形象 、 合 乎 逻辑 的 观点 。 

% 设计 者 的 心理 : 设计 师 一 定 要 自信 ， 坚 信 自己 的 个 人 信仰 、 经 验 、 眼 光 、 品 味 。 
不 讶 从、 不 孤芳自赏 、 不 骄 、 不 浮 ， 以 严谨 的 治学 态度 面 对 ， 不 为 个 性 而 个 性 ， 
不 为 设计 而 设计 。 作 为 一 名 网 页 设计 师 ， 必 须 有 独特 的 素质 和 高 超 的 设计 技能 ， 
即 无 论 多 么 复杂 的 广告 主题 ， 都 应 认真 总 结 经 验 ， 用 心思 考 ， 反 复 推 殴 ， 汲 取消 
化 同类 型 的 优秀 设计 精华 ， 实 现 新 的 创造 。 

个 性 设计 : 有 个 性 的 设计 来 自 扎根 于 本 民族 悠久 的 文化 传统 和 富有 民族 文化 本 色 
的 设计 思想 ， 民 族 性 和 独创 性 及 个 性 同样 是 具有 价值 的 ， 地 域 特点 也 是 设计 师 的 


大 


ie 


0 


As 法 : 
经 新 手 学 做 网 站 DA 


知识 背景 之 一 。 未 来 的 广告 设计 师 不 再 是 狭隘 的 民族 主义 者 ， 而 每 个 民族 的 标志 
更 多 地 体现 在 民族 精神 层面 ， 民 族 和 传统 也 将 成 为 一 种 图 式 或 者 设计 元 素 ， 作 为 
网 页 广告 设计 师 有 必要 认真 看 待 民族 传统 和 文化 。 


9.4.3 ”特殊 的 广告 


什么 是 特殊 广告 ? 在 网 页 中 有 许多 广告 ， 它 们 不 是 通过 图 片 和 动画 来 完成 的 ， 而 是 通 
过 一 门 设计 语言 “JavaScript” 来 实现 ，JavaScript 比较 复杂 ， 但 是 初学 者 只 需 了 解 它 即 可 。 
本 节 将 讲解 常用 的 广告 代码 。 


1， 对 联 广告 


随 着 计算 机 的 发 展 ， 显 示 器 分 辩 率 越 来 越 大 ， 通 常 许多 用 户 打 开 网 页 ， 在 页 面 的 左右 
两 边 都 是 空白 的 ， 为 了 弥补 空白 ， 让 网 页 的 内 容 更 饱满 ， 设 计 者 可 以 制作 对 联 广告 ， 如 
图 9-15 所 示 。 
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我 学 3 到 过 的 末 者 上 用 记 江 用 | 用 记号 录 | 不 | 下 名 
站 学 就 安 ?5 院 法 物 浓 2 次 问 现 省 
1 到， 请 上 朋 记 汉 闪 提出 是 
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图 9-15 对 联 广告 


要 想 实现 这 种 广告 效果 ， 只 需要 将 以 下 代码 复制 到 网 页 中 的 <head> 标 签 , 代码 (光盘 \ 
素材 \ 第 8 章 \ 对 联 代码 .txt) 如 图 9-16 所 示 。 
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docunent .all -lovexin1s.style.pixelTop*-percent; 
1astScrolly=1astScrollYpercent’; 


» 
suspendende12="<D1Y id=leuexin12 style=" leFt=1px;POsITION: abenlute; TOP:22px; >A HREF=" 锌 芯 
pet 


spendcode123 3 
D1Y id=louexin1a style=' right:10px;POSLLION:absolote;1oP:220py; "> <A MBEF=' 锌 


/SCRIPT> 


图 9-16 对 联 广告 代码 


~ ~ 
~ > > 
去 制 到 网 页 中 
ee i 魔法 师 ， 我 知道 了 ， 这 
片 标题 、 样 就 形成 了 好 看 的 对 联 


址 和 链接 地 址 替换 成 你 的 内 容 
广告 。 


就 可 以 了 。 » 
有 7 4 


2， 浮 动 广告 


浮动 广告 在 网 页 中 也 是 比较 常用 一 种 方式 ， 它 在 网 页 中 的 位 置 不 定 ， 随 机 地 在 网 页 中 
运动 ， 如 图 9-17 所 示 。 


ee 


sqc [RE ET 


一 
98 元 , 拍 儿童 号 真 


抢 定 电话 : 62759333 


四 


三 。 
友 
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要 想 出 现 浮动 广告 ， 只 需要 在 <body> 标 签 内 输入 如 下 代码 ， 根 据 实际 的 情况 进行 修改 
即 可 。 代 码 如 下 : 


<div 1d="img" style="position:absolute;"> 
<a hre 全 "链接 地 址 "; target="_blank"> 
<img src=" 图 片 地 址 "; border="0"></a></div> 
<SCRIPT LANGUAGE="JavaScript"> 
外 人 
Var xPos = 20; 
var yPos = document.body.clientHeight: 
var step = 1; 
var delay = 30; 
var height = 0; 
var Hoffset = 0: 
var Woffset = 0: 
var yon = 0; 
Var xon = 0: 
Var pause = true; 
var interval: 
img.style.top = yPos; 
function changePos() { 
width = documentbody.clientWidth: 
height = document.body.clientHeight: 
Hoffset = img.offsetHeight; 
Woffset = img.offsetWidth; 
img.style.left = xPos + document.body.scrollLeft: 
img.style.top = yPos + document.body.scrollTop: 
1f (yon) { 
yPos = yPos + step; } 
else { 
yPos = yPos - step: } 
了 到 if(yPos<0) { 
yon= 1; 
yPos=0;} 
1f (yPos >= (height - Hoffset)) { 
yon=0; 
| | yPos = (height - Hoffset): } 
f(xon) { 
xPos = xPos + step: } 
else { 
xPos = xPos - step; } 
f(xPos<0){ 
xon = 1; 


A * 


ES LT EE 4 
‘ 场 一 学 就 会 魔法 书 颖 :4 


羔 二 


好 / 第 9 章 ， 让 你 的 网 站 别 具 光世 


xPos=0;} 

f(xPos >= (width - Woffset)) { 

xon=0; 

xPos = (width - Woffset); } } 

function www_helpor netO { 

img.visibility = "visible"; 

interval = setInterval(‘changePos()', delay): } 
www_helpor_net(); 

2 

</script> 


3.， 弹出 式 网 页 广告 


弹出 式 网 页 广告 是 指 打开 一 个 网 页 ， 将 弹出 另外 一 个 网 页 或 者 小 窗口 内 的 网 页 广告 。 
这 种 方式 很 常见 ， 许 多 门户 网 站 都 习惯 采用 这 种 广告 方式 ， 如 图 9-18 所 示 。 


soft Intornet Replorer 


ee pe Explorer 


， 害 机 。 时 
| 本 | 音频 | 论坛 | 志 客 
[| 视频 | 下 载 | 指 客 


ES 皇 重 彩 章 娱乐 伏 稚 ， 目 wO 针 适合 办? 
回 时 尚 外 观 设计 回 "TrueUh* 丽 晶 LcD 四 高 并 配置 


Er 
地 天 纪念 馆 蔡 宫 ， 言 灾区 远 点 网 二 是 奥 词 典 不 让 座 看 所 白 
打 仇 战 为 石油 一 一 美国 终于 般 出 你 星 尾 巴 了 ?7 维和 警 察 权 诚 负 
燃油 税 再 郑 就 是 害 自己 上 海 寡 方 簿 动 了 我 ， 却 没 感 动 杨佳 ? 


北京 奥林匹克 中 心 区 20 日 起 禁 行 社会 车 辆 
中 日 领导 人 同意 加 快 东海 铂 亏 田 开发 磋商 

六 方 会 谈 团 长 核验 证 团 将 访 宁 边 
今年 高 校 毕 业 生 将 达 559 万 人 就 业 形势 严峻 


图 9-18 弹出 式 网 页 广告 
要 想 制作 弹出 式 网 页 广告 ， 只 需要 在 <head> 标 签 里 输入 如 下 代码: 


<SCRIPT LANGUAGE="java script:> 
<I-- 


window.open 
(‘page.html','newwindow','height=100,width=400.top=0,left=0,toolbar=no,menubar=no,scro 


Ss 法 
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llbars=no,resizable=no, 

location=no,status=no') 

// 写 成 一 行 

< 

</SCRIPT> 

代码 虽然 没有 几 行 ， 但 是 对 于 初学 者 可 能 有 些 不 懂 ， 下 面 将 解释 这 些 代码 。 
<SCRIPT LANGUAGE="java script"> js 脚本 开始 ; 
window.open ”弹出 新 窗口 的 命令 ; 

page.html 弹出 新 窗口 的 文件 名 ; 

newwindow 弹出 窗口 的 名 字 ( 不 是 文件 名 ) ， 可 用 空 "代替 ; 
height=100 窗口 高 度 ; 

top=0 窗口 距离 屏幕 上 方 的 像素 值 ; 

left=0 窗口 距离 屏幕 左 侧 的 像素 值 ; 

toolbar=no 是否 显示 工具 栏 ，yes 为 显示 ; 

menubar,scrollbars ”表示 菜单 栏 和 滚动 栏 。 


魔法 档案 
网 页 中 有 许多 特效 都 是 通过 JavaScript 代码 来 完成 的 ， 可 以 这 么 说 ，JavaScript 是 网 页 最 
好 的 伙伴 ， 它 可 以 对 网 页 的 菜单 栏 、 状 态 栏 、 鼠 标 光标 等 写 入 特效 ， 让 你 的 网 页 更 炫 。 


9.5 典型 实例 一 一 让 网 页 的 广告 也 精彩 


网 页 中 的 广告 向 浏览 者 传递 着 信息 ， 广 告 对 网 页 本 身 十 分 重要 ， 适 量 应 用 广告 代码 特 


效 ， 就 能 给 网 页 观赏 性 加 分 。 本 章 的 典型 实例 将 设计 一 个 对 联 广告 和 一 个 弹出 式 广告 ， 巩 


固 网 页 广告 的 制作 方法 ， 最 终 效果 如 图 9-19 所 示 。 


> > 
出、 》 小 度 女 ， 网 站 在 应 用 广告 时 ， ~ 
一 定 要 让 广告 界面 美观 ， 给 济 知道 了 ， 魔 法 师 ， 在 应 Dy 
览 者 留 下 好 的 印象 ， 这 样 会 增 用 广告 时 ， 我 坚决 以 美 (Wy 
加 网 页 的 人 气 。 Dy 观 为 原则 。 
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图 9-19 最 终 效果 
具体 操作 如 下 : 
和 步骤 1 启动 Dreamweaver CS3, 打开 “index.html” 网 页 (光盘 :\ 素 材 \ 第 9 章 \ddvindex. 
html) ， 单 击 左 上 角 的 鹤 病 按钮， 如 图 9-20 所 示 。 
步骤 2 ”在 <body> 标 签 内 ， 输 入 浮动 广告 的 代码 ， 代 码 参照 9.4.3 节 的 浮动 广告 代码 ， 
如 图 9-21 所 示 。 


图 9-20 代码 视图 图 9-21 输入 浮动 广告 代码 
和 步骤 3 将 鼠标 光标 定位 到 </head> 标 签 的 前 面 一 行 ， 在 这 一 行 里 输入 对 联 广 告 代 码 ， 
对 联 代 码 可 以 参照 9.4.3 节 的 对 联 广 告 代码 ， 如 图 9-22 所 示 。 
步 驿 4 选择 【文件 〗/【 保 存 】〗 命 令 ， 单 击 国 说 + 按钮 ， 返 回 到 设计 视图 窗口 ， 如 
图 9-23 所 示 。 


by ; 


新 手 学 做 网 站 


553 - IDaVPRPowvhtdecsvaysxitevinder-htnl 
ETEEOEEIEEIEEIEEITEZIIEI3ETTDICEEEIII 
大 呈 网 “作用 ”天 | 要 加 Sry 文 丰收 U 

[3k] 日 生 | 虹 罗 加 已 | 加 号 豆 科 扩 回 回 - 


owemnlA. se, pivelToprpereenrs 
LastseroLlirpereene: 


并 
莉 开 中 国 市 名 太 门 前 一 刘磊 这 的 站 坟 ， 


网 革 开 发 
全 一 二 城关 本 让 村 并 这 个 统一 的 


二 
上 
本 输入 代码 | Ee 


上 家 开 中 国 和 6 Cos a Et 
na 6 


oR 于 


er 
| 


a 人 天 下 CEJs/: Ea 4 
1 x 小 国 [9s0 司 口 得 
和 和 6D 身 车 A 
Bm i a Ne 5 a er 


图 9-22 输入 代码 图 9-23 返回 设计 视图 


步骤 5 新 建 一 个 网 页 ， 命名 为 “tc.html”， 插 入 “gg.swf” (光盘 :\ 素 材 \ 第 9 章 \dd\ 
images\gg.swf) 广告 ， 在 “属性 ”面板 中 可 设置 Flash 动画 的 参数 ， 这 里 保存 
默认 设置 ， 单 击 区 _ 播 让 按钮， 如 图 9-24 所 示 。 

步骤 6 将 其 保存 后 ， 切 换 到 “index.html” 网 页 ， 在 <head> 标 签 里， 输入 弹出 窗口 代 
码 (代码 参照 9.4.3 的 各 出 到 同 玉 各 代 融 J ， 如 图 9-25 下。 
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图 9-24 制作 弹出 式 网 页 图 9-25 输入 代码 
步 又 7 制作 完成 后 保存 所 有 文件 ， 按 【F12】 键 预览 ， 最 终 效 果 如 图 9-19 所 示 ( 光 


法 车 
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盘 :\ 最 终 效果 \ 第 9 章 ddindexhtml) 。 


9.6 常见 问题 解答 


A. 魔法 师 ， 我 在 设计 一 个 医院 网 站 时 ， 应 该 如 何 配色 ， 才 能 让 这 个 网 站 更 精彩 ? 

£. 配色 的 问题 ， 是 仁者 见 仁 ， 智 者 见 智 ， 没 有 唯一 的 配色 方式 ， 不 过 我 可 以 把 自己 的 
配色 经 验 告诉 给 你 。 如 果 制 作 这 个 网 站 , 我 会 选用 红色 或 橙色 作为 突出 颜色 , 绿色 、 
蓝 色 或 黄 绿色 作为 主要 颜色 ， 这 样 给 人 一 种 柔和 、 安 静 、 卫 生 的 感觉 ， 另 外 网 页 除 
了 黑色 和 白色 外 ， 其 他 颜色 最 好 不 要 超过 3 种 ， 这 样 不 利于 站 点 的 美观 ， 更 无 法 衬 
托 出 重点 。 


: 魔法 师 ， 我 想 为 自己 的 站 点 设计 一 个 Logo， 需 要 哪些 工具 才能 完成 ? 


: 设计 Logo 是 一 件 很 难 的 事情 。 商 业 网 站 中 的 Logo， 通 常 是 由 专门 的 设计 者 设计 制 
作 的 ， 不 过 中 小 型 企业 ， 为 了 节约 资本 ， 可 以 由 网 页 美工 人 员 设 计 ， 用 户 只 需 用 
Photoshop 或 者 Flash 就 可 以 设计 简单 的 网 站 Logo。 


Pa 的 


: 导航 有 文字 导航 、 图 片 导航 和 动画 导航 ， 这 三 者 分 别 适 用 于 哪些 网 站 呢 ? 


: 文字 导航 和 图 片 导航 一 般 用 于 网 站 内 容 较 多 的 大 型 网 站 ， 如 网 易 、 新 浪 等 ， 动 画 导 
航 一 般 用 于 中 小 型 和 个 人 网 站 。 


Pa 的 


: 9.4.3 节 中 讲解 的 是 特效 广告 ， 为 什么 我 制作 了 这 些 广告 ， 却 没有 显示 出 来 呢 ? 


Pa 的 


: 因为 在 网 页 中 插入 特效 广告 后 ， 很 可 能 会 影响 到 打开 网 页 的 速度 ， 以 至 于 很 多 浏览 
器 都 拦截 了 这 些 广告 。 如 果 用 户 需要 显示 这 些 广告 ， 只 需 解除 拦截 即 可 。 


97 过 关 练 习 


(1) 欣赏 下 面 的 两 个 网 站 主页 ， 总 结 出 它们 网 站 的 Logo 设计 和 导航 设计 的 优 缺点 ， 
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如 图 9-26 所 示 。 
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9-26 国内 知名 的 C2C 网 站 


(2) 打开 网 页 (光盘 :\ 素 材 \ 第 9 章 \helx.html) ， 制 作 一 个 浮动 广告 网 页 ， 最 终 效果 
如 图 9-27 所 示 〔 光 盘 :\ 最 终 效果 \ 第 9 章 \Ix\lx.html) 。 


图 9-27 最 终 效果 


交互 让 网 页 变 得 更 有 内 酒 


认识 动态 网 页 

POPe 语言 的 特点 
动态 网 页 中 的 表达 式 
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魔法 师 : 
小 魔女 : 


魔法 师 : 


小 魔女 : 


魔法 师 : 


锅 a 多 媒体 教学 演示 ; 42 分 钟 


小 和 魔女， 你 在 做 什么 呢 ? 

我 正在 给 别人 的 网 站 留言 呢 ， 
魔法 师 ， 为 什么 我 制作 的 网 页 
不 能 留言 呢 ? 

能 留言 就 说 明 这 个 网 站 具有 交 
互 功能 。 也 就 是 说 这 个 网 站 是 
动态 网 站 ， 前面 我 们 制作 的 网 
站 是 静态 网 站 ,当然 不 能 留言 。 
什么 是 动态 网 站 ， 我 能 殷 快 学 
会 它 吗 ? 
动态 网 站 是 指 用 .Net、Java、 
PHP 等 程序 开发 的 网 站 ,其 
中 .Net、Java 适用 于 开发 大 型 
网 站 ，PHP 庆 合 开发 中 小 型 网 
站 ,下 面 将 讲解 用 PHP 技术 制 
作 动 态 网 站 。 让 你 理解 动态 网 
站 和 静 志 网 站 的 差别 。 


Rs 新 手 学 做 网 站 


10.1 认识 动态 网 页 


在 前 面 讲解 了 如 何 用 记事 本 写 网 页 语言 , 其 实 就 是 HTML 语言 , PHP 是 动态 交互 语言 
技术 ， 它 和 其 他 语言 一 样 ， 是 嵌入 在 HTML 代码 中 的 ， 然 后 通过 一 些 特殊 的 标记 来 区 分 
HTML 代码 和 客户 端 脚本 。 


10.1.1 认识 PHP 


PHP 非常 简单 , 就 本 质 上 而 言 它 就 是 一 个 文本 文件 , 因此 用 户 可 以 通过 任意 工具 编写 ， 
如 记事 本 。 然 而 记事 本 太 过 于 传统 ， 不 利于 开发 ， 所 以 就 用 Dreamweaver 等 工具 来 开发 编 
写 它 ， 然 后 将 其 以 后 级 名 为 “.php” 的 文件 保存 。 


1. PHP 文件 的 组 成 


一 个 完整 的 PHP 文件 由 5 部 分 组 成 ， 即 HTML 代码 、PHP 标记 、PHP 代码 、 注 释 和 
空格 ， 它 们 是 PHP 文件 中 必 不 可 少 的 元 素 。 


2. 如 何 编写 第 一 个 PHP 程序 


在 本 书 中 已 经 讲解 如 何 安装 和 使 用 PHPnow， 实 际 上 它 就 是 一 个 PHP 的 运行 环境 。 有 
了 这 个 运行 环境 再 启动 Dreamweaver CS3 新 建 一 个 名 为 “one.php” 的 网 页 后 ， 用 户 会 在 插 
入 栏 发 现 插入 栏 多 了 一 个 选项 卡 ， 这 个 选项 卡 就 是 PHP 选项 卡 ， 这 时 就 可 以 编写 PHP。 具 
体操 作 如 下 : 

和 步骤 1 在 启动 的 Dreamweaver CS3 中 ， 单 击 “ 代 码 ” 按 钮 3， 如 图 10-1 所 示 。 


a 
小 魔女 ， 在 PHP 选项 卡 下 有 
许多 PHP 的 开发 工具 ， 单 击 


它们 ， 可 以 少 输入 许多 代码 。 
一 4 


\ 


ma/ 
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步骤 2 单 击 后 , 将 会 在 代码 区 出 现 红色 的 “<?php ?>”， 这 就 是 PHP 的 标记 分 隔 符 ， 
代码 就 写 在 里 面 ， 如 这 里 输入 “echo" 你 好 ， 中 国 2008! "”， 这 是 一 句 简单 


的 PHP 语句 ， 意 思 为 显示 在 网 页 上 的 文字 为 “你 好 ， 中 国 2008! ”。 


步骤 3 
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de 
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; S i A 
四 虹 目 四国 的 Pr 守 W @ 人 D- 
Bu sa Ot 品 


CI 
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图 10-2 第 一 个 PHP 代码 


10.1.2 ”PHP 语言 的 特点 


PHP 是 一 种 运行 服务 器 端 并 完全 跨 平台 的 嵌入 式 脚本 编程 语言 ， 堪 称 是 动态 网 页 制作 
的 主流 语言 , 它 吸收 了 多 种 程序 的 优点 ,Internet 的 盛行 带动 了 PHP 语言 的 快速 发 展 , PHP 
因 其 功能 强大 、 易 学 易 用 、 可 扩展 性 强 、 运 行 速度 快 及 开放 性 好 而 成 为 网 站 开发 者 的 首选 
工具 之 一 ， 其 较 高 的 开发 速率 给 程序 员 在 编写 网 页 程序 时 带 来 了 极 大 的 便利 。 
PHP 语法 主要 借鉴 于 C/C++， 也 有 部 分 参考 了 Java 和 Perl， 因 此 熟悉 C/C++ 的 读者 ， 


| 


[以 快速 地 掌握 PHP 的 语法 。 


如 C 语言 在 书写 完 一 句 代 码 时 ， 以 “; 


束 ， 如 图 10-3 所 示 。 


外 PHP 讲 庄 -php 一 


记事 本 


单 击 PHP 选项 卡 中 的 “注释 ”按钮 4， 然后 输入 注释 文字 ， 以 注释 PHP 语 
F12] 键 预览 网 页 ， 如 图 10-2 所 示 。 


”魔法 档案 一 一 一 一 一 一 一 ~ 
PHP 标记 除了 上 面 的 那 种 方式 , 还 有 


3 ,<% W%>、 <script language= “php” > 
</script>3 种 ， 但 为 了 区 别 于 其 他 语言 ， 建 议 初 
学 者 应 用 <?php ?>。 


为 一 个 好 的 源 程序 注释 总 是 十 分 详细 的 ， 在 维 
护 、 升 级 时 能 够 起 到 重要 的 作用 ， 在 PHP 代码 
中 ， 注 释 通常 有 两 种 ， 一 种 是 “//”, 可 以 用 于 单 
行 注释 ， 需 要 多 行 注释 则 写 为 “/* */”。 


| 遍 法 当 案 、 
任何 一 种 语言 都 少不了 代码 注释 , 因 


”结束 ， 在 书写 PHP 时 也 一 样 ， 以 “; ” 结 


者 a 


文字 为 “我 一 定 能 学 好 网 站 制作 !”。 


启动 Dreamweaver CS3, 新 建 一 个 PHP 
网 页 ， 书 写 一 个 可 以 显示 在 网 页 中 的 语句 ， 显 示 


As 法 | 
‘4 新 手 学 做 网 站 - 


控制 语句 则 不 同 ， 控 制 语句 不 需要 以 分 号 结束 ， 如 图 10-4 所 示 的 代码 ， 是 PHP 语言 
对 控制 语句 书写 的 特点 。 


配 PEP 讲座 .php - 记事 本 
文件 四) 编辑 下 ) 格式 @) 查看 如 帮助 名 


if "(>-260) 


echo “Hello World"; 
echo " 


岂 长 大 下 … 
-天语 必须 离开 ， 我 们 得 奋斗 ……“ 


?> 


10-4 ”控制 语句 的 特点 


10.2 PHP 网 页 中 的 变量 


不 管 是 什么 编程 语言 ， 都 具备 量 的 概念 ， 量 分 为 常量 和 变量 ， 常 量 是 固定 不 变 的 量 ， 
如 “4”、“5” 和 “中 国 ”， 它 们 自身 无 法 改变 自己 变量 就 是 一 个 保存 了 一 小 块 数据 的 
“对 象 ”， 从 变量 的 字面 理解 ， 它 是 可 以 改变 的 ， 表 示 该 数据 块 中 的 值 随时 都 可 以 改变 ， 
在 不 同 的 时 间 表 现 不 同 的 内 容 。 


10.2.1 PHP 变量 命名 


任何 编程 语言 都 会 遵循 变量 声明 的 某 些 规则 ，PHP 也 不 例外 ， 它 具备 几 个 特点 ， 分 别 
介绍 如 下 : 

学 ”PHP 的 变量 名 必须 区 分 大 小 写 ， 和 C 语言 是 一 致 的 。 

党 ”变量 名 必须 是 以 美元 符号 ($) 开始 。 

党 ”变量 名 开头 应 以 下 划 线 和 字母 开始 ， 不 能 以 数字 开始 。 

党 变量 名 可 以 包含 中 文字 符 。 

根据 上 面 的 变量 特点 可 以 准确 地 判断 出 哪些 变量 是 合法 的 ， 哪 些 是 不 合法 的 ， 从 而 书 
| 写 合法 的 变量 。 如 图 10-5 所 示 为 合法 变量 。 


$4site = "not yet” 
$4site = “not yet” 


图 10-5 合法 的 变量 名 


这 魔法 档案 
在 给 变量 命名 时 ， 最 好 让 变量 具有 一 定 的 含义 ， 能 够 代表 一 定 的 信息 ， 这 样 利 于 阅读 源 代 
码 ， 同 时 也 利于 对 变量 名 的 引用 。 


一 


:时 
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ma/ 二 


10.2.2 PHP 的 数据 类 型 


在 PHP 的 程序 设计 中 ， 数 据 类 型 可 分 为 两 大 类 ， 一 个 是 简单 类 型 ， 一 个 是 复杂 类 型 。 
其 特点 分 别 介绍 如 下 : 
党 ”简单 类 型 :这 是 程序 中 常见 的 数据 类 型 , 它 包括 布尔 型 ( boolean )、 整 型 ( interger )、 
浮 点 型 (float) 和 字符 串 是 ( String ) 。 
党 ”复杂 类 型 : 数组 (array ) 和 对 象 (object) 。 


过 魔法 档案 

有 了 数据 类 型 ， 知 道 合法 的 变量 名 ， 就 可 以 很 简单 地 为 变量 赋值 了 。 赋 值 其 实 很 简单 
它 是 什么 类 型 就 给 它 赋予 什么 类 型 的 值 ， 如 “Side=9000"， 这 就 是 简单 的 赋值 语句 ， 从 这 个 赋值 看 出 
$ide 很 可 能 是 整 型 ，“9000” 是 赋予 它 的 值 。 


10.2.3 ”变量 的 作用 范围 


PHP 的 变量 都 有 一 定 的 作用 范围 ， 变 量 说 明 语句 主要 分 为 全 局 变量 和 局 部 变量 ， 它 可 
以 出 现在 程序 的 任何 位 置 ， 在 不 同 的 位 置 声明 ， 其 作用 域 不 同 ， 其 特点 分 别 介绍 如 下 

党 ”全 局 变量 : 其 说 明 语句 不 在 任何 一 个 类 定义 、 函 数 定义 或 复合 语句 (程序 块 ) 中 
的 变量 。 全 局 变量 所 占用 的 空间 在 内 存 的 数据 区 ， 在 程序 运行 的 整个 过 程 中 位 置 
保持 不 变 。 

党 ”局 部 变量 : 其 说 明 语句 在 某 一 个 类 定义 、 函 数 定义 或 复合 语句 〈 程 序 块 ) 中 的 变 
量 。 局 部 变量 所 占用 的 空间 在 为 程序 运行 时 所 设置 的 临时 工作 区 中 ， 以 堆栈 的 形 
式 允 许 反复 占 用 和 释放 。 

全 局 变量 将 会 对 整个 代码 都 有 着 影响 ， 代 码 如 下 


<?php 

$a= 1; 

$b=2; 

function SumO{ 
global $a, $b; 
$b= $a+ $b:} 

Sum(); 

echo $b: 

?> 


在 函数 中 声明 了 全 局 变量 $a 和 $b, 但 它 在 局 部 中 不 立即 生效 , 需要 使 用 关键 字 global， 
对 于 一 个 函数 能 够 声明 的 全 局 变量 的 最 大 个 数 ，PHP 没有 限制 ， 所 以 以 上 程序 输出 的 结果 
为 “3”。 

局 部 变量 只 对 代码 中 的 某 个 区 块 起 作用 ， 代 码 如 下 : 


诬 


ss 新 手 学 做 网 站 


<?php 
function Test() 
{$a= 1; 

} 

echo $a; 
Test(); 

?> 


该 例 中 定义 了 一 个 局 部 变量 $a， 它 只 用 于 局 部 ， 不 适用 于 全 局 ， 所 以 这 个 代码 将 没有 
任何 显示 结果 。 


10.2.4 可 变 变量 
所 谓 可 变 变量 是 指 一 个 变量 的 变量 名 可 以 动态 地 设置 和 使 用 。 一 个 可 变 变量 与 其 他 变 
量 差不多 ， 通 过 声明 来 设置 ， 如 图 10-6 所 示 。 


ophp php ophp 《php 
$a = "hello”; $$a = "world"; echo "$a $f$a}l”; echo "$a $hello”; 
?> ?> ?> ?> 


图 10-6 可 变 变量 
一 个 可 变 变量 获取 一 个 普通 变量 的 值 作为 这 个 可 变 变量 的 变量 名 。 在 第 一 幅 图 中 编写 
程序 的 例子 中 hello 使 用 了 两 个 美元 符号 ($) 以 后 ， 就 可 以 作为 一 个 可 变 变量 的 变量 ; 第 
二 幅 图 中 可 以 看 清楚 两 个 变量 都 被 定义 了 :$a 的 内 容 是 hello 并 且 $hello 的 内 容 是 “world”， 
因此 可 写成 第 三 幅 图 中 所 示 的 程序 ， 第 四 幅 图 和 第 三 幅 图 中 的 内 容 一 样 ， 只 是 表述 更 为 准 
确 ， 它 们 执行 后 的 结果 都 会 输出 “hello world”。 


10.3 动态 网 页 中 的 表达 式 


表达 式 是 PHP 最 重要 的 基石 ， 简 单 地 讲 一 个 表达 式 就 是 “任何 有 值 的 东西 ”。 表 达 式 
是 运算 符 和 操作 数 的 组 合 ， 通 过 运算 符 和 表达 式 可 实现 程序 编制 中 所 需 的 大 量 操作 ， 最 基 
本 的 表达 式 是 为 常量 和 变量 赋值 。 例 如 当 输 入 “$a=5”， 即 将 值 “5” 分 配给 变量 $a。“5” 
很 明显 , 其 值 为 5, 换 句 话说 “5” 是 一 个 值 为 5 的 表达 式 (在 这 里 ，“5” 是 一 个 整 型 常量 ) 。 
赋值 之 后 ， 所 期 待 情况 是 $a 的 值 为 5s， 因而 如 果 写 下 $b=$a， 期 望 它 犹如 $b=5 一 样 。 换 句 话 
说 ，$a 是 一 个 值 也 为 5 的 表达 式 。 如 果 一 切 运行 正常 ， 那 这 正 是 将 要 产生 的 正确 结果 。 

稍微 复杂 的 表达 式 就 是 函数 (函数 的 内 容 将 在 第 11 章 讲解 ) ， 例 如 以 下 代码 : 

<?php 

function foo0!{ 

return 5; } 


入 


时 
l 第 10 章 “交互 让 网页 变 得 更 有 内 酒 类 法 世 
ma/ > 


> 


假定 已 经 熟悉 了 函数 的 概念 (如 果 不 是 的 话 ， 请 看 一 下 第 11 章 函 数 的 相关 内 容 ) ， 
那么 输入 $c= foo0 从 本 质 上 来 说 就 类 似 写 下 $c=5。 函 数 也 是 表达 式 ， 表 达 式 的 值 即 为 它们 
的 返回 值 。 既 然 foo0 返 回 5， 表 达 式 “foo0” 的 值 也 是 5。 通 常 函 数 不 会 仅仅 返回 一 个 静 
态 值 ， 可 能 会 计算 一 些 东 西 。 

当然 ,， PHP 中 的 值 常常 并 非 是 整 型 的 。PHP 支持 4 种 标量 值 ( 标 量 值 不 能 拆 分 为 更 小 
的 单元 , 例如 和 数组 不 同 ) 类 型 : 整 型 值 (integer) 、 浮 点 数值 (float) 、 字 符 串 值 (string) 
和 布尔 值 (boolean) 。PHP 也 支持 两 种 复合 类 型 : 数组 和 对 象 。 这 两 种 类 型 都 可 以 赋值 给 
变量 或 者 从 函数 返回 。 

表达 式 的 概念 是 十 分 抽象 的 ， 但 表达 式 都 有 一 个 具体 的 代码 表示 ， 一 般 来 说 ， 一 个 表 
达 式 是 任何 一 个 有 界 的 符号 集合 。 


10.4 数 组 


数组 是 程序 中 最 为 重要 的 一 个 对 象 ， 在 程序 设计 中 ， 如 要 存储 10000 个 临时 数据 ， 按 
照 前 面 所 学 习 的 知识 需要 定义 10000 个 变量 。 定 义 10000 个 变量 对 于 程序 设计 者 来 说 是 一 
个 十 分 巨大 的 任务 , 因此 ， 能够 保存 多 个 数据 的 数组 产生 了 , 数组 可 以 保存 一 个 或 多 个 值 ， 
且 灵 活 方便 。 


10.4.1 数组 类 型 
数组 可 以 根据 下 标 和 单元 进行 分 类 ， 数 字 类 型 包括 枚 举 数组 、 关 联 数组 和 多 维 数组 。 


1， 枚 举 数组 


下 标 为 整数 的 数组 为 枚 举 数组 或 数字 索引 数组 ， 这 些 数组 用 来 保存 值 ， 例 如 ， 可 以 有 
一 个 tongxue 的 数组 ， 其 中 这 个 数组 的 每 一 个 元 素 都 可 以 保存 一 个 同学 的 姓名 。 
在 数组 中 ， 每 个 独立 元 素 都 可 以 通过 索引 符号 来 引用 ， 例 如 tan 这 个 名 字 可 以 通过 0 
来 引用 ， 为 了 显示 索引 3 的 数组 元 素 ， 可 以 通过 下 面 的 这 个 语句 表示 ， 代 码 如 下 : 

echo "tongxue[3]"; 


| 魔法 档案 
在 默认 情况 下 ， 数 组 的 索引 号 从 0 开始 ， 并 依次 增加 ， 因 此 数组 最 后 一 个 索引 号 ， 总 是 比 
该 数组 中 元 素 总 数 小 1。 


2.， 关联 数组 
如 果 需 要 通过 名 称 访问 数组 中 的 元 素 ， 那 么 应 该 使 用 字符 串 作为 数组 的 索引 ， 来 保存 
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值 以 及 名 称 ， 使 用 字符 串 作 为 下 标的 数组 称 为 关联 数组 。 
要 访问 数组 元 素 ， 可 以 根据 其 索引 使 用 命令 Prin"tongxue[x]"， 而 不 是 echo 
("tongxue[x]") ,这 里 的 X 表示 数组 元 素 的 索引 号 。 
使 用 索引 《〈 枚 举 ) 数组 的 数组 和 字符 串 数字 索引 (关联 数组 ) 存在 的 差别 十 分 微小 ， 
对 于 关联 数组 以 字符 串 为 索引 ， 就 不 能 计算 数组 的 下 一 个 有 效 索 引 ， 但 是 ， 可 以 使 用 数组 
标识 符 来 把 索引 分 配给 前 面 讨 论 的 tongxue 数组 ， 可 以 通过 索引 来 创建 一 个 关联 数组 
tongxue Name。 代 码 如 下 : 


$Tongxue_ Name["namel"]= " 张 三 "; 

$Tongxue_Name["name2"]=" 李 四 "; 

$Tongxue Name["name3"]= " 王 二 ": 

也 可 以 将 其 转化 成 一 个 关联 数组 ， 代 码 如 下 : 
$Tongxue=array("name1"=>" 张 三 ", "name2"=>" 李 四 ", "name3"=>" 王 二 "); 
把 枚 举 数组 转化 关联 数组 后 ， 可 以 使 用 echo 命令 来 访问 数组 的 元 素 。 
echo "$Tongxue[name3] "; 

将 会 得 到 结果 王 二 。 


3， 二 维 数组 


可 以 在 另外 一 个 数组 中 保存 不 同 的 变量 以 及 完整 的 值 ， 二 维 数组 Amn 可 视 为 由 m 个 
行 向 量 组 成 的 向 量 ， 或 由 n 个 列 向 量 组 成 的 向 量 ， 二 维 数组 是 由 两 个 下 标 组 成 ， 两 个 值 确 
定 一 个 坐标 ， 就 是 表述 的 哪个 数组 值 ， 如 图 10-7 所 示 。 


n 个 列 向 量 


Am = 


aml 8n2 mn 
图 10-7 二 维 数组 

10.4.2 ”数组 初始 化 
数组 可 以 使 用 数组 标示 符 和 array0 数 组 两 种 方法 进行 初始 化 。 


1.， 使 用 数组 标示 符 
数组 标示 符 是 一 组 内 空 的 方 括号 ， 其 结构 如 下 : 


RN 


‘WW 


:时 
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S$arr[key]=value; 
$student[]=value; 


2.， 使 用 array() 数 组 


使 用 array0 函 数 初始 化 数组 是 更 简单 的 方法 ， 使 用 aray0 函 数 可 以 同时 为 一 个 数组 分 
配 多 个 值 ， 可 以 使 用 array0 函 数 ， 按 照 下 面 的 方式 来 定义 数组 Tongxue: 


S$Tongxue=array("susan", "menglu", "Jhon"); 

上 面 是 创建 了 一 个 数组 ， 下 面 代码 则 是 创建 一 个 二 维 数组 ， 代 码 如 下 : 
$arr=array("somearrry"=>array(6=>5,13=>9, "a"=>42)); 

echo $arr["somearry"][6];// 结 果 为 5 

echo $arr["somearry"][13];// 结 果 为 9; 


10.5 控制 语句 


由 于 PHP 的 大 部 分 语法 都 继承 了 C 语言 的 语法 ， 因 此 ， 在 流程 控制 方面 ， 也 是 有 着 
和 C 语言 极其 类 似 的 循环 。 流 程 的 部 分 分 隔 符号 都 是 使 用 “{” 当 作 部 分 的 开头 ， 用 “}” 
当 作 结 尾 ， 和 C 语言 相同 ，PHP 语法 中 每 条 指令 结束 时 都 要 加 上 分 号 “; ”， 但 是 在 部 分 
结尾 符号 “)” 后 面 不 用 加 上 分 号 结束 。 


10.5.1 ”条件 语句 


条 件 语句 是 先 判断 其 条 件 ， 如 果 满 足 ， 则 执行 指定 语句 的 内 容 ， 如 果 不 满足 ， 则 跳 过 
指定 的 语句 执行 后 面 的 内 容 。 


1. if 语 句 
这 语句 的 结构 表达 式 结构 如 下 : 


1f (expr) 
statement 


语句 解释 : 在 上 面 的 语句 中 ，expr 按照 布尔 求 值 ， 如 果 expr 的 值 为 True， 则 执行 
statement; 如果 值 为 Flash， 则 不 执行 statement。 

如 下 面 的 例子 : 

<2php 

1f ($a>$b) 

echo "a 大 于 b": 

?> 
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以 上 语句 ， 判 断 变量 a 是 否 大 于 b， 如 果 a 大 于 b， 则 输出 字符 串 “a 大 于 b”， 和 否则 
不 作 任何 处 理 。 

如 果 按 照 条 件 执行 不 止 一 条 语句 ， 当 然 并 不 需要 给 每 条 语句 都 加 上 一 个 站 语句 。 可 以 
将 这 些 语句 放 入 语句 组 中 ， 通 过 大 括号 “{” 和 “}” 括 起 来 。 例 如 ， 如 果 $a 大 于 $b， 以 下 
语句 将 显示 “a 大 于 b” 并 且 将 $a 的 值 赋 给 $b。 


<?php 

1f($a>$b){ 
echo "a 大 于 b"; 
$b=$a; 


} 


和 


让 语句 可 以 无 限制 地 嵌 套 在 其 他 让 语 名 中, 这 给 程序 不 同 部 分 的 条 件 执行 提供 了 可 能 ， 
经 常 需要 在 满足 某 个 条 件 时 执行 一 条 语句 , 而 在 不 满足 该 条 件 时 执行 其 他 语句 , 这 正 是 else 
的 功能 。else 延伸 了 让 语句 ， 可 以 在 站 语句 中 表达 式 的 值 为 False 时 执行 语句 。 例 如 以 下 
语句 在 $a 大 于 $b 时 显示 “a 大 于 b”， 反 之 则 显示 “a 小 于 b”。 


<?php 
1f ($a>$b){ 

echo "a 大 于 了 b"; 
Jelse{ 

echo "a 小 于 了 b"; 
} 
Ea 


如 果 需 要 同时 判断 多 个 条 件 ， 则 上 面 的 站 …else 语句 无 法 满足 需求 ， PHP 提供 了 elseif 
语句 来 扩展 需求 。elseif 通常 用 在 于 和 else 语句 之 间 。 如 以 下 语句 ， 将 判断 变量 a 和 bb 的 
大 小 ， 如 果 a 大 于 b， 则 输出 “a 大 于 b”; 如 果 a 等 于 b， 则 输出 “a 等 于 b”; 如 果 a 小 
于 b， 则 输出 “a 小 于 b”。 


<?php 
1f ($a> $b) { 
echo "a is bigger than b": 
} elseif ($a — $b) 
{ 
echo "a ls equal to b"; 
} 
else { 
echo "als smaller than b"; 
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2. switch 语句 


switch 语句 和 具有 同样 表达 式 的 一 系列 让 语句 相似 。 很 多 场合 下 需要 把 同一 个 变量 
(或 表达 式 ) 与 很 多 不 同 的 值 比较 , 并 根据 它 等 于 哪个 值 来 执行 不 同 的 代码 。 这 正 是 switch 
语句 的 用 途 ， 其 结构 如 下 : 


switch(expn){ 
case expIl: 
statement]; 
break: 
Case expr2; 
statement2; 
break': 


Default: 
Statement N: 
Break: 

} 


语句 解释 : 其 中 的 expr 条 件 ， 通 常 为 变量 名 称 ， 而 Case 后 的 exprN 表示 变量 值 ， 冒 
号 后 则 为 符合 该 条 件 时 将 要 执行 的 部 分 。 
可 以 写 一 个 简单 的 switch 语句 ， 如 下 面 的 例子 : 


Switch ($1) { 
case 0: 
echo 1 的 值 0"; 
break: 
case 1: 
echo i 的 值 是 1"; 
break: 
case 2: 
echo i 的 值 是 2"; 
break: 
} 
为 避免 错误 , 理解 swtich 是 怎样 执行 的 就 显得 非常 重要 , switch 代码 是 一 行 行 地 执行 ， 
当 执行 代码 遇 到 break 关键 词 时 ，swtich 将 跳出 循环 体 。swtich 是 条 件 语 句 ， 初 学 者 在 写 程 
序 时 ， 一 定 要 在 程序 段 结束 前 跟 上 一 个 break 语句 ， 以 让 switch 跳出 循环 体 ， 不 必 执行 不 
必要 的 代码 。 


说 | 
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10.5.2 ”循环 语句 


循环 语句 是 反复 执行 一 系列 的 语句 ， 直 到 条 件 表达 式 保持 真 值 。 为 了 保证 循环 的 正确 
执行 ， 条 件 表达 式 的 值 应 该 在 每 次 执行 时 进行 修改 ， 下 面 介 绍 几 种 常见 的 循环 语句 。 


1. for 循环 语句 
for 循环 语句 是 PHP 中 最 复杂 的 循环 结构 ， 其 结构 如 下 : 


for (exprl; expr2; expr3 ) statement 


语句 解释 : exprl 在 循环 开始 前 取 值 一 次 ，expr2 在 每 次 循环 开始 前 求 值 。 如 果 值 为 
True， 则 继续 循环 ， 执 行 撕 套 的 循环 语句 。 如 果 值 为 False， 则 终止 循环 。expr3 在 每 次 循 
环 之 后 被 求 值 (执行 )。 

每 个 表达 式 都 可 以 为 空 ，expr2 为 空 意味 着 将 无 限 循 环 下 去 (和 C 一 样 ，PHP 认为 其 
值 为 True) 。 

如 下 面 例子 : 


<?php 

for ($1= 1; $1<= 10; $1++) { 
echo $i; 

} 


echo "<br>"; 
for ($1= 1; ; $1++) 


if($1> 10) 
{ 
break; 
WE } 
echo $i; 
} 


echo "<br>"; 


| $i=1; 
for (::) { 
1f($1>10){ 
break; 
} 
echo $i; 
$i++; 
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上 面 3 种 for 循环 语句 是 常见 的 ,第 一 、 二 个 语句 是 完整 的 for 循环 语句 ,第 3 个 结构 
并 不 算 完整 ， 而 是 使 用 空 表达 式 来 实现 ， 事 实 上 可 以 用 break 控制 。 
代码 执行 后 的 结果 如 图 10-8 所 示 。 


http://127.0.0. /aysiteyone-php - Wicrosoft Internet Explorer 基因 
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图 10-8 代码 执行 后 的 结果 


】 魔法 档案 
“echo "<br>";" 语 句 是 换行 的 意思 ， 这 个 并 不 是 循环 体 必 要 的 内 容 ， 但 是 有 它 可 以 更 好 地 
区 分 3 个 循环 体 的 执行 结果 。3 个 循环 体 写 法 不 同 ， 但 从 如 图 10-8 所 示 的 结果 可 以 知道 ， 它 们 的 结 
果 是 相同 的 。 


2.，while 循环 语句 
while 循环 是 PHP 中 最 简单 的 循环 类 型 ， 其 结构 如 下 : 


while (expr) statement 


语句 解释 : while 语句 的 含义 很 简单 , 它 告诉 PHP 只 要 while 表达 式 的 值 为 True 就 重 
复 执 行 嵌 套 中 的 循环 语句 。 表 达 式 的 值 在 每 次 开始 循环 时 检查 ， 所 以 即使 这 个 值 在 循环 语 
句 中 改变 了 ， 语 句 也 不 会 停止 执行 ， 直 到 本 次 循环 结束 。 有 时 候 如 果 while 表达 式 的 值 一 
开始 就 是 False， 则 循环 语句 一 次 都 不 会 执行 ， 和 让 语句 一 样 ， 可 以 在 while 循环 中 用 大 
括号 括 起 一 个 语句 组 ， 或 者 用 替代 语法 。 

如 下 面 的 例子 : 


<2php 

= 

while ($1<= 10) { 
echo $i++; 


} 
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echo "<br>"; 

$i=1; 

while ($1 <= 10): 
print $i; 
$i++; 

endwhile; 

?> 


这 是 while 语句 的 基本 写法 ， 其 执行 效果 相同 ， 执 行 代码 后 的 结果 如 图 10-9 所 示 。 
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图 10-9 执行 代码 后 的 结果 


3. do-while 循环 语句 


do-while 循环 和 while 循环 非常 相似 ， 区 别 在 于 表达 式 的 值 是 在 每 次 循环 结束 时 检查 
而 不 是 开始 时 。 和 正规 的 while 循环 的 主要 区 别 是 do-while 的 循环 语句 保证 会 执行 一 次 
(表达 式 的 真 值 在 每 次 循环 结束 后 检查 ) ， 然 而 在 正规 的 while 循环 中 就 不 一 定 了 (表达 
式 真 值 在 循环 开始 时 检查 ， 如 果 一 开始 就 为 False 则 整个 循环 立即 终止 ) 。 

do-while 循环 只 有 一 种 语法 ， 结 构 如 下 : 


<?php 
$i=0; 
dof 
echo $i: 
} while ($1> 0); 
es 


语句 解释 : 以 上 循环 将 至 少 运行 一 次 ， 因 为 经 过 第 一 次 循环 后 ， 其 值 为 False ($i 不 大 
于 0) 而 导致 循环 终止 。 


4. foreach 循环 语句 


foreach 循环 语句 是 一 种 特殊 的 循环 语句 ，foreach 仅 能 用 于 数组 ， 当 试图 将 其 用 于 其 
他 数据 类 型 或 者 一 个 未 初始 化 的 变量 时 会 产生 错误 。 有 两 种 语法 ， 第 二 种 比较 次 要 但 却 是 
第 一 种 的 有 用 的 扩展 ， 结 构 如 下 : 


并 


> 时 
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foreach (array_expression as $value) 
statement 

foreach (array_expression as $key => $value) 
statement 


语句 解释 : 第 一 种 格式 遍历 给 定 的 array_expression 数组 ,每 次 循环 中 ， 当 前 单元 的 值 
被 赋 给 $value 并 且 数 组 内 部 的 指针 向 前 移 一 步 〈 因 此 下 一 次 循环 中 将 会 得 到 下 一 个 
单元 ) 。 

第 二 种 格式 做 同样 的 事 ， 除 了 当前 单元 的 键 名 也 会 在 每 次 循环 中 被 赋 给 变量 $key。 


Wl 魔法 档案 

当 foreach 开始 执行 时 ， 数 组 内 部 的 指针 会 自动 指向 第 一 个 单元 ， 这 意味 着 不 需要 在 
foreach 循环 之 前 调用 reset()。 除非 数组 是 被 引用 ，foreach 所 操作 的 是 指定 数组 的 一 个 备份 文件 ， 
而 不 是 该 数组 本 身 。 因 此 数组 指针 不 会 被 each() 结构 改变 ， 对 返回 的 数组 单元 的 修改 也 不 会 影响 原 
数组 。 不 过 ， 原 数组 的 内 部 指针 的 确 在 处 理 数组 的 过 程 中 向 前 移动 了 。 假定 foreach 循环 运行 到 结 
束 ， 原 数组 的 内 部 指针 将 指向 数组 的 结尾 。 


例如 下 面 的 代码 : 


<?php 

$arr = array("one", "two", "three"): 
reset($arr); 

while (list(, $value) = each($arr)) 


echo "Value: $value<br>\n"; 
} 
foreach ($arr as $value) { 

echo "Value: $value<br />\n"; 


} 

?> 

上 面 代码 执行 后 的 结果 是 : 
Value: one 

Value: two 

Value: three 

Value: one 

Value: two 

Value: three 


While 循环 语句 和 forech 循环 语句 执行 的 结果 相同 ,根据 foreach 的 第 二 种 方法 ， 也 可 
以 写成 下 面 的 代码 : 


foreach ($arr as $key => $value) { 


Ss 多、 
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echo "Key: $key; Value: $value<br />\n"; 
} 


初学 者 不 懂 本 节 代码 ， 也 无 关 紧 要 ， 因 为 用 户 还 没有 对 数组 进行 理解 ， 用 户 只 需要 理 
解 此 语句 是 一 种 循环 语句 ， 用 它 可 以 控制 数组 的 循环 即 可 。 


5. break 和 continue 语句 


在 控制 语句 中 , break 和 continue 是 两 个 比较 重要 的 语句 , 读者 通过 这 两 个 语句 可 以 增 
强 编程 的 灵活 性 ， 提 高 编程 效率 。 下 面 分 别 介绍 这 两 个 语句 。 
(1) break 语句 


break 结束 当前 for、foreach、while、do-while 或 者 switch 结构 的 执行 。break 可 以 接 
受 一 个 可 选 的 数字 参数 来 决定 跳出 几 重 循环 。 
下 面 再 通过 一 个 实例 来 学 习 break 语句 ， 例 如 下 面 的 代码 : 


<2php 
$1=0; 
while (++91) 
{ 
switch ($1) 
Case 5: 
echo "At 5<br />\n"; 
break 1; /* Exit only the switch. */ 
case 10: 
echo "At 10; quitting<br />\n"; 
break 2: /* Exit the switch and the while. */ 
default: 
break: 


| } 
} 
?> 
上 面 的 代码 有 一 个 可 选 参 数 ， 表 示 跳 出 几 层 循环 ， 代 码 执行 后 的 结果 如 下 : 
At5 
At 10; quitting 
(2) continue 语句 
continue 循环 结构 用 来 跳 过 本 次 循环 中 剩余 的 代码 并 在 条 件 求 值 为 真 时 开始 执行 下 一 


成 
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下 面 是 continue 接受 一 个 可 选 的 数字 参数 来 决定 跳 过 几 重 循环 到 循环 结尾 , 例如 下 面 
的 代码 : 
<?php 
while (list ($key, $value) = each($arr)) { 
1f (!($key % 2)) {// skip odd members 


continue; 
: 
do_something odd($value); 
} 
$1=0; 
while ($it++ < 5) 
{ 
echo "Outer<br />\n":; 
while (1) 
{ 
echo "&nbsp;&nbsp;Middle<br />\n"; 
while (1) 
echo "&nbsp:&nbsp:Inner<br />\n"; 
continue 3; 
} 
echo "This never gets output.<br />\n"; 
} 
echo "Neither does this.<br />\n": 
} 
?> 


10.6 运 算 符 


在 前 面 的 章节 中 ， 或 多 或 少 的 接触 了 运算 符 ， 或 许 有 人 不 明白 其 中 的 意思 ， 觉 得 就 是 
一 些 数学 运算 符 ， 但 在 程序 设计 中 ， 这 些 符号 至 关 重 要 ， 下 面 将 详解 讲解 。 


10.6.1 算术 运算 符 


还 记得 小 学 时 学 到 的 基本 数学 里 面 的 加 减 乘除 吗 ? 算术 运算 符 和 它 有 些 类 似 ， 也 有 加 
减 乘除 的 效果 ， 如 图 10-10 所 示 。 
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二 四 法 和 和 向 的 和 Sg 
-和 清寺 同和 0 的 基 . 算术 运算 符 太 简单 了 ， 区 
aa#$b 又 法 $a 和 $b 的 积 。 就 跟 小 学 时 学 的 数学 符 

[$a/ $b 除法 $a 除 义 $b 的 两 。 与 类似。 

后 台 环 模 四 阶 久 $b 的 条 数 . » > 


10-10 算术 运算 符 


10.6.2 ”赋值 运算 符 


基本 的 赋值 运算 符 是 “=”， 一 开始 可 能 会 以 为 它 是 “等 于 ”， 其 实 不 是 的 。 它 实际 
上 意味 着 把 右边 表达 式 的 值 赋 给 左边 的 运算 数 。 

赋值 运算 表达 式 的 值 也 就 是 所 赋 的 值 。 也 就 是 说 ，“$a =3” 的 值 是 3。 这 样 就 可 以 做 
一 些 改变 ， 例 如 下 面 代码 : 


$a=($b=4)+5; //$a 现在 成 了 9， 而 $b 成 了 4 

在 基本 赋值 运算 符 之 外 ， 还 有 适合 于 所 有 二 元 算术 、 数 组 集合 和 字符 串 运 算 符 的 “组 合 
运算 符 ”, 这 样 可 以 在 一 个 表达 式 中 使 用 它 的 值 并 把 表达 式 的 结果 赋 给 它 , 例如 下 面 的 代码 : 

<?php 

$a=3; 

$at=5;// 这 个 表达 式 相当 于 $a=$a+5， 执 行 完 这 步 ，$a 的 值 就 等 于 8 

$b="Hello":; 

$b="There!"; 


10.6.3 ”位 运算 符 


位 运算 符 允 许 对 整 型 数 中 指定 的 位 进行 置 位 。 如 果 左 右 参 数 都 是 字符 串 ， 则 位 运算 符 
将 操作 字符 的 ASCII 值 。 如 图 10-11 所 示 为 各 个 位 运算 符 的 使 用 方法 。 


| 例子 名 称 结果 
全 & 由 And ( 按 位 与 。 胸 把 $a 和 $b 中 者 为 1 的 位 设 为 1。 
$9 | $b ”Or ( 按 位 或) 将 把 $a 或 者 和 中 为 1 的 位 设 为 1 


|$a 个 $b Xor ( 按 位 异 或 ) ”将 把 $a 和 $b 中 不 同 的 位 设 为 1。 

~ $9 。 |Not ( 按 位 非 ) 将 $a 中 为 0 的 位 设 为 1， 反 之 亦 然 。 

$a << $b Shift le 代 ( 左 移 ) ”将 $a 中 的 位 向 左 移动 $b 次 每 一 次 移动 都 表示 "又 以 2") 。 
$a >> 和 [Shift right ( 右 移 ) 上 将 $a 中 的 位 向 右 移动 $b 次 每 一 次 移动 吉 表 示 ' 除 以 2”) 。 


10-11 位 运算 符 
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10.6.4 ”比较 运算 符 
比较 运算 符 如 同 它 们 名 称 所 暗示 的 ， 人 允许 对 两 个 值 进行 比较 ， 如 图 10-12 所 示 。 


例子 “名称 结果 
$a == 和 $ 等 TRUE， 如果 $a 等 于 $b。 
$a === $b 全 等 。 |rRuE， 如 果 $a 等 于 $b， 并 且 它们 的 类 型 也 相同 。 (PHP 4 引进 ) 
$61= 加 ”不 等 。 |rRvE， 如 果 $a 不 等 于 $b。 
$a <> $ 不 等 。 “TRuE, 如 果 $a 不 等 于 $b。 
和 1== $b 腓 全 等 “|rRuE， 如 果 $a 不 等 于 $b， 或 者 它们 的 类 型 不 同 。 (PHP 4 引进) 
$a<$b 小 与 ”|rRUE， 如 果 $a 严格 小 于 $b。 
$a >$b 大 于 ”|rRuE, 如 果 $a 严格 $b。 
$a <= $b 小 于 等 于 rRue， 如 果 $a 小 于 或 者 等 于 $b。 
$a >= $b 大 于 等 于 IrRue， 如 果 $a 大 于 或 者 等 于 $b。 


10-12 ”比较 运算 符 


10.6.5 ”递增 /递减 运算 符 


PHP 语言 支持 C 语言 风格 的 前 后 递增 与 递减 运算 符 ， 这 种 运算 符 也 常用 在 表达 式 中 ， 
使 用 方法 如 图 10-13 所 示 。 


例子 名 称 效果 

++$$a 前 加 |$a 的 值 加 一 ， 然 后 返回 $a。 
$a+ 十 后 加 返回 $a， 然 后 将 $a 的 值 加 一 。 
--$a 前 减 $a 的 值 减 一 ， 然后 返回 $a。 
$a-- 后 减 返回 $a， 然 后 将 $a 的 值 减 一 。 


图 10-13 递增 /递减 运算 符 


10.6.6 ”逻辑 运算 符 


“与 ”和 “或 ”有 两 种 不 同形 式 运算 符 的 原因 是 它们 运算 的 优先 级 不 同 ， 使 用 方法 如 
图 10-14 所 示 。 


例子 名 称 结果 
$a and $b And (逻辑 与 ) TRUE， 如果 $a 与 $b 都 为 TRUE. 
$a or 向 Or (逻辑 或 ) TRUE， 如 果 $a 或 $b 任 一 为 TRUE. 
$a xor $b Xor (逻辑 异 或 ) TRUE， 如 果 $a 或 $b 任 一 为 TRUE， 但 不 同时 是 . 
1$a 。 ”|Not (还 辑 非 》 rRvE, 如 果 $a 不 为 TRUE。 
$a && $b And (水 辑 与 ) /TRUE， 如 果 $a 与 $b 都 为 TRUE。 


$a || $b Or (还 辑 或 ) TRUE， 如 果 $a 或 $b 任 一 为 TRUE. 


图 10-14 逻辑 运算 符 
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10.6.7 ”数组 运算 符 


数组 运算 符 把 右边 的 数组 附加 到 左边 的 数组 后 面 , 但 是 重复 的 键 值 不 会 被 覆盖 , 使 用 方法 
如 图 10-15 所 示 。 


例子 “名称 结果 
$a 二 $b 磋 合 $a 和 和 的 联合 . 
$a == $b 相等 ”如 果 $a 和 $b 具有 相同 的 健 / 值 对 由 为 TRUE。 
$a === $b 全 等 ”如 果 $a 和 $b 具有 相同 的 键 / 值 对 并 且 顺 序 和 类 型 都 相同 则 为 TRUE。 
$a != $b ”不 等 ”如 果 $a 不 等 于 $b 则 为 TRUE.。 
$a <> $b 不 等 ”如 果 $a 不 等 于 $b 则 为 TRUE。 
$a !== $b 不 全 等 如 果 $a 不 全 等 于 $b 则 为 TRUE. 


图 10-15 数组 运算 符 


10.7 类 与 对 象 


每 个 类 的 定义 都 以 关键 字 class 开头 , 后 面 跟着 类 名 , 可 以 是 任何 非 PHP 保留 字 (PHP 
中 间 的 保留 字 ， 有 着 特殊 的 意义 ， 它 们 中 有 些 像 是 函数 ， 有 些 像 是 常量 。 它 们 是 语言 结构 
的 一 部 分 ， 如 类 class、for 等 都 属于 保留 字 ) 的 名 字 。 后 面 跟着 一 对 大 括号 ， 里 面包 含有 
类 成 员 和 方法 的 定义 。 伪 变量 $this 可 以 在 当 一 个 方法 在 对 象 内 部 调用 时 使 用 。$this 是 一 个 
调用 对 象 〈 通 常 是 方法 所 属于 的 对 象 ， 但 也 可 以 是 另 一 个 对 象 ， 如 果 该 方法 是 从 第 二 个 对 
象 内 静态 调用 的 话 ) 的 引用 。 


10.7.1 创建 类 


在 PHP 中 ， 要 创建 一 个 类 十 分 简单 ， 只 需要 关键 字 class 即 可 。 一 个 最 简单 的 类 如 下 
所 示 : 


class classname{ 


} 


在 上 面 的 代码 中 ，classname 表示 类 名 ， 这 个 类 没有 任何 属性 和 方法 ， 也 就 是 说 是 一 个 
空 类 ， 它 无 任何 意义 。 

在 类 中 一 定 要 有 属性 和 方法 ， 属 性 通常 是 定义 变量 ， 方 法 是 运用 变量 ， 操 作 其 他 的 东 
西 ， 例 如 下 面 的 代码 : 


<2php 
class SimpleClass 


{ 


Var $myname; 


-"% 
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Var $myage; 

function getName() 

{ 

: 
function getAge($argl,$arg2){ 
} 
} 


?> 


以 上 的 类 和 方法 有 属性 、 有 方法 ， 是 一 个 比较 完整 的 类 。 
10.7.2 ”构造 函数 


构造 函数 是 程序 设计 中 十 分 重要 的 ， 大 多 数 的 类 都 需要 构造 函数 ， 当 一 个 类 实例 被 调 
用 时 ， 将 调用 构造 函数 ， 通 常 构 造 函 数 中 将 执行 一 些 初始 化 的 操作 。 

在 新 版 本 的 PHP 里 ,构造 函数 的 名 称 必须 与 类 名 相同 , 但 是 为 了 向 下 兼容 ,PHP 首先 
在 类 中 寻找 是 否 有 _consrtuct0 函 数 ， 如 果 没 有 则 找 与 类 名 相同 的 函数 。 

声明 构造 函数 的 方法 很 简单 ， 其 结构 如 下 : 


class BaseClass { 
function constructO { 
print "In BaseClass constructor\n"; 


} 
} 


10.7.3 ”类 的 实例 化 


在 声明 一 个 类 后 ， 如 果 要 使 用 该 类 ， 必 须 创 建 一 个 实例 ， 实 际 上 也 就 可 以 将 该 类 作为 
一 个 变量 ， 在 变量 之 前 必须 自己 定义 ， 定 义 该 类 实例 ， 被 称 为 创建 一 个 实例 或 者 实例 化 一 
个 类 。 在 PHP 中 ， 可 以 使 用 关键 字 “new” 来 创建 一 个 实例 ， 例 如 下 面 的 代码 : 


<2php 
class myName{ 
function _ construct($myName){ 


echo(" 我 的 名 字 是 : SmyName<br>"); /| 输出 名 字 

} 

} 

$namel=new myName(" 乔 峰 "); // 为 myName 类 创建 一 个 实例 
$name2=new myName(" 虚 竹 "); // 为 myName 类 创建 一 个 实例 


4 | 
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$name3=new myName(" 段 誉 "); 
$name4=new myName(" 莫 容 复 "); 
> 

执行 后 的 结果 如 下 所 示 。 


我 的 名 字 是 : 乔 峰 
我 的 名 字 是 : 虚 狂 
我 的 名 字 是 : 段 淮 
我 的 名 字 是 : 慕容 复 


10.7.4 ”使 用 类 的 属性 


在 一 个 类 中 ， 访 问 类 成 员 变 量 有 一 个 特殊 的 指针 一 一 $this。 通 过 指针 ， 可 以 方便 地 访 
问 类 属性 或 者 类 属性 赋值 。 如 果 类 的 属性 名 称 为 SmyAttrib， 要 设置 该 变量 ， 通 过 
“S$this->myAttrib” 语 句 设置 即 可 ， 代 码 如 下 所 示 。 


<?php 

class classname{ 

Var $myAttrib;// 定 义 属性 

funciton operate($myparam) 
{$this->myAttrib=$myparam:// 设 置 属性 值 为 $myparam 
echo $this->myAttrib;// 输 出 属性 值 

} 

: 


?> 


10.7.5 ”类 的 访问 控制 


对 属性 或 方法 的 访问 控制 ， 是 通过 在 前 面 添加 关键 字 public、protected 或 private 来 
| 实现 的 。 由 public 所 定义 的 类 成 员 可 以 在 任何 地 方 被 访问 ; 由 protected 所 定义 的 类 成 员 
则 可 以 被 其 所 在 类 的 子 类 和 父 类 访问 (当然 ， 该 成 员 所 在 的 类 也 可 以 访问 ) ; 而 由 private 
定义 的 类 成 员 则 只 能 被 其 所 在 类 访问 。 
根据 下 面 的 代码 ， 读 者 可 以 更 清楚 地 明白 这 3 个 关键 词 的 作用 ， 其 代码 如 下 : 
| <?php 
class MyClass 


{ 
public $public = 'Public'; 
protected $protected = 'Protected'; 
private $private = 'Private'; 
function printHello() 
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{ 
echo S$this->public; 
echo S$this->protected; 
echo S$this->private; 

} 


} 
S$obj = new MyClass(); 
echo $obj->public; // 这 行 能 被 正常 执行 
echo $obj->protected; // 这 行 会 产生 一 个 致命 错误 
echo $obj->private; // 这 行 也 会 产生 一 个 致命 错误 
$obj->printHello(); // 输出 Public、Protected 和 Private 
class MyClass2 extends MyClass 
{ 
// 可 以 对 public 和 protected 进行 重 定义 ， 但 private 不 能 
protected $protected = 'Protected2'; 
function printHello0{ 
echo S$this->public:; 
echo S$this->protected; 
echo S$this->private; 
}3 
$obj2 = new MyClass2(); 
echo $obj->public; // 这 行 能 被 正常 执行 
echo $obj2->private; // 未 定义 Private 
echo $obj2->protected; // 这 行 会 产生 一 个 致命 错误 
$obj2->printHello0:/ 输出 Public、Protected2， 但 不 会 输出 Private 


class Bar 
下 
public function testO { 
S$this->testPrivate(); 
Sthis->testPublic():} 


public function testPublicO { 
echo "Bar::testPublicn";} 
private function testPrivateO { 
echo "Bar::testPrivate\n";} 
} 
class Foo extends Bar 
{ 
public function testPublic() { 
echo "Foo::testPublicn"; 
} 
Private function testPrivate() { 
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echo "Foo::testPrivate\n"; 
} 
} 
$myFoo = new foo(); 
$myFoo->test(); // Bar::testPrivate 
?> 


10.7.6 ”类 方法 的 调用 


前 面 已 经 详细 讲解 了 类 属性 的 访问 和 设置 ， 类 方法 的 访问 和 调用 同类 属性 基本 相似 ， 
例如 下 面 的 代码 : 


class classname{ 
Var $myAttrib;// 定 义 属性 
function func_1($param) /函数 func 1 
[函数 代码 
} 
function func_2($param1,$param2)// 函 数 func 2 
{ 
/函数 代码 } 
} 
function func 3($param1,.$param2)// 函 数 func 2 


{// 通 数 代码 
return backvalue: 


} 


类 方法 的 调用 十 分 重要 ， 如 要 调用 上 面 的 类 ， 具 体操 作 如 下 : 
步骤 1 首先 创建 一 个 类 实例 ， 然 后 输入 如 下 代码 : 


Snewclass=new classname():;// 创 建 一 个 类 classname 实例 
步骤 2 创建 类 后 ， 只 需 输入 如 下 代码 : 


$newclass->func 1("123"):// 调 用 函数 func_1 
$$newclass->func_ 2("123", "abc"):// 调 用 函数 fanc 2 
[| $myvalue=newclass->func_3("123", "abe"); /调用 函数 func 3 


10.7.7 ”类 的 高 级 操作 


类 是 面向 对 象 的 一 个 标志 ， 它 的 高 级 操作 主要 有 类 的 继承 和 接口 的 使 用 ， 这 些 操作 可 
以 让 类 变 得 更 加 丰富 。 
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1.， 类 的 继承 


继承 从 字面 上 看 很 好 理解 ， 也 就 是 说 它 具 备 父 类 的 一 切 特征 ， 类 的 继承 就 是 说 ， 子 类 
将 具备 父 类 的 一 切 特征 ， 继 承 后 ， 子 类 将 具备 父 类 的 一 切 属性 和 方法 。 继 承 的 方法 也 十 分 
简单 ， 只 需 在 子 类 后 面 跟 上 extends 类 名 即 可 ， 代 码 如 下 : 


class location Cart extends Cart{ 
Var $location:// 子 类 中 的 属性 
function set_ location($myloasation){ 
$this->location=$myloacation; 

} 

} 


上 面 定义 了 location-Cart 类 ， 它 继承 了 Cart 类 ， 该 类 拥有 Cart 类 的 所 有 变量 和 函数 ， 
加 上 附加 的 变量 $loacation 和 一 个 附加 函数 set_location()。 


2.， 接口 的 实现 


在 PHP 中 , 虽然 可 以 通过 继承 让 一 个 类 具备 另 一 个 类 的 特征 , 但 是 继承 是 单一 的 ,也 
就 是 说 ， 一 个 子 类 只 能 继承 一 个 父 类 ， 这 给 程序 设计 者 带 来 诸多 不 便 。 接 口 的 实现 让 一 个 
类 具备 了 多 个 接口 的 特征 ， 代 码 如 下 : 


<?php 
interface displayable{ 
function display(): 
} 
interface printable{ 
function doprint(); 
} 
class foo implements displayable, parintable{ 
funcion displayO 
{// 通 数 代 码 } 
function doprintO{ 
/函数 代码 
;3 


LF 


从 上 面 的 代码 可 以 看 出 foo 类 具备 了 两 个 接口 的 特征 ,接口 的 关键 词 “interface”， 实 
现 的 关键 词 是 “implements”， 了 解 了 接口 的 特征 ， 就 可 以 很 轻松 地 操作 该 对 象 而 不 必 去 
关心 对 象 的 内 部 是 如 何 运行 的 。 
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10.8 异常 处 理 


在 PHP 代码 中 所 产生 的 异常 可 被 throw 语句 抛 出 并 被 catch 语句 捕获 。 需 要 进行 异常 
处 理 的 代码 都 必须 放 入 try 代码 块 内 ， 以 便 捕获 可 能 存在 的 异常 。 每 一 个 try 至 少 要 有 一 个 
与 之 对 应 的 catch。 使 用 多 个 catch 可 以 捕获 不 同 的 类 所 产生 的 异常 。 当 try 代码 块 不 再 抛 
出 异常 或 者 找 不 到 catch 能 匹配 所 抛 出 的 异常 时 ,PHP 代码 就 会 在 跳 转 到 最 后 一 个 catch 的 
后 面 继续 执行 。 当 然 ，PHP 允许 在 catch 代码 块 内 再 次 抛 出 (throw) 异常 。 

当 一 个 异常 被 殷 出 时 ， 其 后 的 代码 将 不 会 继续 执行 ， 而 PHP 就 会 尝试 查找 第 一 个 能 
与 之 匹配 的 catch。 如 果 一 个 异常 没有 被 捕获 ， 而 且 又 没 使 用 set_exception_handler0 作 相应 
的 处 理 的 话 ， 那 么 PHP 将 会 产生 一 个 严重 的 错误 ， 并 且 输出 Uncaught Exception (未 
捕获 异常 ) 的 提示 信息 。 

处 理 异 常 ， 代 码 如 下 : 


Serror = 'Always throw this error': 
throw new Exception($error); 
// 从 这 里 开始 ，tra 代码 块 内 的 代码 将 不 会 被 执行 
echo 'Never executed': 
} catch (Exception $e) { 
echo 'Caught exception: ', $e->getMessage(), "\n"; 
} 
// 继续 执行 
echo 'Hello World': 
?> 


上 面 的 类 是 用 PHP 中 自 带 的 类 处 理 异 常 , 在 实际 的 编写 程序 中 , 用 户 也 可 以 自己 编写 
程序 来 完成 异常 的 处 理 。 


10.9 典型 实例 一 一 计算 图 片 的 高 度 和 宽度 


本 章 虽 然 学 习 了 PHP 的 基础 ， 但 是 用 户 还 是 不 能 编写 完整 的 程序 去 完成 网 站 的 交互 ， 
大 家 不 要 操之过急 。 下 面 通过 一 个 程序 来 计算 图 片 的 高 度 ， 然 后 通过 网 页 的 方式 将 其 宽度 
和 高 度 显示 给 浏览 者 。 
具体 操作 如 下 : 
步骤] 启动 Dreamweaver CS3， 新 建 一 个 PHP 的 文档 ， 然 后 将 “bj.jpg” (光盘 :\ 素 
材 \ 第 10 章 \bj.jpg) 复制 到 需要 的 网 站 路 径 下 ， 新 建 完成 后 ， 在 “插入 栏 ” 中 
选择 “PHP” 选 项 卡 ， 再 单 击 好 按钮 ， 如 图 10-16 所 示 。 


一 学 丈 会 谨 法 书简 


昼 广 
二 o/ 和 人 
二 第 10 章 ， 交 互让 网 页 变 得 更 有 内 涵 一 


步 驿 2 将 图 片 插 入 到 网 页 中 ， 然 后 输入 如 图 10-17 所 示 的 代码 。 


EF OE IEE 局 


10-16 插入 PHP 代码 块 图 10-17 输入 代码 


步 又 3 制作 完成 后 ,将 文件 保存 ， 然 后 按 【F12】 键 预览 网 页 (光盘 :\ 最 终 效果 \ 第 10 
章 Wpic.php) ， 如 图 10-18 所 示 ， 可 以 清楚 地 知道 图 片 的 宽度 是 101px， 高 度 
是 41px。 
加 http://127. 0. 0. /ayhoaeypic-php - Hicrosoft Internet Expl... 若 | 固 | 攻 | 
文件 @) ”编辑 人 查看 W) 收 着 工具 中 帮助 0 E72 
@@ 是 -上 日 - 国 国 的 Pr 丙 tx 加 全- 胖 回 “ 


地 站 四 | 败 htp Vizr0 ohowgicmtp 加 加 和 WG@smert 加 


的 
图 片 的 宽度 ，101 
图 片 的 高 度 ，41 
文件 的 格式 为 ，2 


10-18 显示 给 浏览 者 


魔法 档案 
上 面 这 个 例子 虽然 在 实际 制作 过 程 中 毫 无 意义 ,但 是 它 指 导 了 一 种 编程 思想 ， 一 个 编程 的 
全 过 程 。 至 于 如 何 编写 网 站 模块 ， 需 要 长 时 间 的 积累 ， 还 要 不 断 的 学 习 ， 才 能 编写 精美 的 程序 。 


10.10 常见 问题 解答 


人 A. 魔法 师 ， 我 学 完了 这 章 ， 怎 么 觉得 什么 都 不 会 做 呢 ? 这 是 为 什么 ， 难 道 是 我 太 策 ， 


万 | 


| 
a 
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没有 学 习 动态 网 站 的 天 赋 ? 


人 学习 制 作 动态 网 站 ， 实 际 上 就 是 写 程序 ， 写 程序 心态 很 重要 ， 尤 其 是 初学 者 ， 容 易 
出 现 心 浮 气 躁 的 现象 ， 或 者 急于 求 成 ,总 想 做 点 东西 出 来 ， 这 是 不 对 的 。 学 习 程序 ， 
首先 要 和 弄 懂 是 怎么 一 回 事 ,这 一 章 是 PHP 的 基础 ， 只 讲解 了 一 些 语法 结构 ， 当 然 不 
能 使 用 它 制作 出 交互 实例 。 


: 魔法 师 ， 我 学 了 类 ， 但 是 还 是 不 明白 类 在 PHP 中 有 什么 作用 ， 我 该 如 何 用 它 ? 


: 什么 是 类 ， 你 一 定 要 和 弄 懂 类 的 定义 ， 在 编写 程序 时 ， 用 户 可 将 有 共同 特点 和 属性 的 
组 成 一 个 类 ， 然 后 设置 属性 ， 设 置 方法 ， 让 它 做 一 些 事情 ， 例 如 入 是 一 个 大 类 ， 人 
都 有 鼻子 、 眼 睛 、 耳 杂 等 属性 ， 然 后 让 鼻子 去 闻 香 味 ， 用 了 眼睛 看 事物 ， 用 耳 末 听 音 
乐 ， 这 就 是 方法 ， 它 将 指挥 类 干什么 。 


Po 四 


10.11 过 关 练 习 


(1) 编写 一 个 PHP 程序 ， 要 求 从 1 加 到 10， 然 后 计算 出 总 和 ， 显 示 在 网 页 上 。 

提示 : 定义 变量 ， 然 后 用 控制 语句 for 循环 语句 ， 或 者 while 语句 ， 循 环 相 加 ， 然 后 显 
示 出 来 即 可 。 

(2) 编写 一 个 人 的 类 ， 定 义 它 的 属性 ， 让 它 具 有 一 定 的 属性 ， 读 者 通过 编写 这 个 程 
序 明白 面向 对 象 实际 上 就 是 对 客观 事物 的 描述 。 

提示 : 用 属性 描写 人 类 共有 的 特征 ， 眼 睛 、 耳 杂 、 手 、 脚 。 用 方法 描述 人 要 做 什么 。 
用 户 通过 此 练习 ， 彻 底 明白 什么 是 面向 对 象 。 


如 何 使 用 函数 


认识 函数 
国 数 变量 的 作用 域 
如 何 使 用 函数 手册 


典型 实例 一 一 编写 读 取 文件 代 
‘Ap 


小 魔女 : 


魔法 师 : 


小 魔女 : 


魔法 师 . 


网" 多 炬 体 教学 演示 : 29 分 名 


魔法 师 ， 听 说 要 实现 某 些 功能 ， 
要 使 用 画 数 ， 画 数 重要 吗 ? 

画 数 是 程序 中 最 主要 的 核心 之 
一 。 它 可 以 帮助 用 户 实现 许多 
功能 。 画 数 的 强 弱 ,决定 着 程 
序 语言 的 优良 。 

魔法 师 ， 画 数 如 此 重要 ， 那 什 
么 是 西数 呢 ? 

画 数 是 自 包 含 的 和 独立 的 代码 
块 , 它 可 以 完成 某 种 具体 任务 ， 
一 般 情 况 下 ， 这 个 任务 需要 多 
次 的 执行 。 


: 动态 网 站 有 那么 多 种 功能 ,他 


们 都 是 通过 丁 数 实现 的 吗 ? 


: 大 部 分 的 功能 都 是 通过 画 数 实 


现 的 ， 所 以 用 户 一 定 要 记 住 兴 
要 男 数 ,然后 学 会 使 用 画 数 
于 谢 。 
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11.1 认识 函数 


函数 是 程序 的 核心 ，PHP 的 函数 有 成 千 上 万 ， 但 它们 的 特点 相同 。 函 数 有 3 种 类 型 ， 
即 自 定义 函数 、 内 置 函 数 以 及 变量 函数 。 


11.1.1 ”内 置 函 数 


内 置 函数 是 PHP 中 用 来 实现 某 种 功能 的 函数 , 它 有 自己 的 标准 和 结构 ,一 些 特殊 内 置 
函数 还 需要 和 特定 的 PHP 扩展 模块 一 起 编译 ， 否 则 在 使 用 它们 的 时 候 会 得 到 一 个 致命 的 
“未 定义 函数 ”错误 ， 也 就 是 说 一 个 内 置 函 数 的 正常 使 用 必须 得 到 PHP 的 支持 。 默 认 情 况 
下 ，PHP 对 常用 内 置 函 数 是 直接 支持 的 。 例 如 ， 要 使 用 图 像 函数 imagecreatetruecolor0， 需 
要 在 编译 PHP 时 加 上 GD 的 支持 ; 要 使 用 mysql_connectO 函 数 ， 就 需要 在 编译 PHP 的 时 候 
加 上 MySQL 支 持 。PHP 手册 按照 不 同 的 扩展 库 组 织 了 它们 的 文档 。 请 参阅 配置 ， 安 装 各 自 
的 扩展 库 章节 以 获取 如 何 设置 PHP 的 信息 。 

下 面 讲解 一 些 使 用 频率 较 高 的 内 置 函数 和 语法 结构 。 


1，echo 函数 
该 函数 用 于 输出 一 个 或 者 多 个 字符 串 ， 其 结构 如 下 : 
Void echo ( string argl [,string argn.… … ]) 


严格 地 echo 并 不 是 函数 ， 而 是 一 个 语法 结构 ， 因 此 在 使 用 该 函数 时 ， 可 以 不 使 用 括号 
将 参数 括 起 来 。 


2. include 函数 


include 函数 在 网 页 设计 中 十 分 重要 ， 它 可 以 很 好 地 实现 代码 的 可 重用 性 ， 同 时 还 可 以 
简化 文件 代码 。 

include 语句 包含 并 运行 指定 文件 ， 加 入 现 有 文件 aphp， 在 aphp 文件 中 包含 了 b.php 
文件 ， 也 就 是 在 aphp 文件 加 入 了 “include ‘b.php’;” 语 句 ， 当 服务 器 运行 到 a.php 这 一 行 
时 ， 就 会 自动 读 取 b.php 的 代码 并 执行 其 中 的 代码 。 

此 方法 非常 有 用 ， 如 在 网 页 设计 中 ， 很 多 时 候 大 部 分 页 头 和 页 尾 都 是 一 样 的 ， 为 了 减 
少 每 个 页 面 的 代码 重复 ， 可 以 将 页 尾 和 页 头 分 别 做 成 top.html 和 bootm.html， 然 后 在 页 面 
中 包含 该 页 面 ， 代 码 如 下 : 


<2php 

include ‘top.html'; 
include 'bootm.html'; 
?> 
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11.1.2” 自 定义 函数 


用 户 自 定义 函数 也 称 为 自 定义 函数 ， 任 何 有 效 的 PHP 代码 都 有 可 能 出 现在 函数 内 部 ， 
甚至 包括 其 他 函数 和 类 定义 。 函 数 名 和 PHP 中 的 其 他 标签 命名 规则 相同 。 有 效 的 自 定义 函 
数 名 以 字母 或 下 划 线 开头 ， 后 面 跟 字母 、 数 字 或 下 划 线 。 


1 声明 函 数 


在 PHP 程序 中 ， 自 定义 函数 必须 要 声明 函数 ， 方 法 同 其 他 编程 语言 几乎 一 样 。PHP 
声明 函数 的 语法 结构 如 下 : 


functio function name($argumentl, $argument2, $argument3, $argument4...){ 

// 函 数 代码 code 

Return 返回 值 ; 

} 

以 上 语法 结构 中 ， 关 键 字 的 含义 介绍 如 下 。 

党 function: 用 于 声明 用 户 自 定义 函数 的 关键 字 。 

党 ”function name: 要 创建 的 函数 名 称 。 该 名 称 将 在 以 后 被 调用 时 使 用 。 函 数 名 应 该 
惟一 ， 因 为 PHP 不 支持 重 载 。 在 命名 函数 时 ， 需 要 遵循 和 变量 命名 相同 的 原则 。 
但 是 ， 函 数 不 能 以 $ 开 头 ， 而 变量 可 以 。 

党 argument: 要 传递 给 函数 的 值 。 函 数 可 以 有 多 个 参数 ， 它 们 之 间 用 过 号 分 开 。 但 
是 参数 项 是 可 选 的 ， 可 以 在 调用 函数 时 不 传递 任何 参数 。 

党 ”code: 是 在 函数 被 调用 时 执行 的 一 段 代码 。 如 果 有 两 条 或 者 多 条 语句 ， 则 代码 工 
要 用 大 括号 “{}” 括 起 来 。 但 是 ， 如 果 只 有 一 条 代码 ， 则 不 需要 大 括号 。 

党 ”Return: 将 调用 的 代码 需要 的 值 返回 。 任 何 类 型 都 可 以 返回 ， 包 括 列 表 和 对 象 。 
这 导致 函数 立即 结束 它 的 运行 ， 并 且 将 控制 权 传递 回 它 被 调用 的 行 。 


2.， 无 参数 函数 


下 面 通过 简单 的 实例 来 学 习 无 参数 函数 的 使 用 , 该 函数 没有 返回 值 , 同时 也 没有 参数 ， 
代码 如 下 : 

<?PHP 

function foo0{ 

echo "天 气 好 热 <br>"; 

echo "希望 明天 有 大 雨 <br>"; } 

echo "函数 还 没有 被 调用 呢 ?<br>"; 

foo0;// 开 始 调用 该 函数 

echo "函数 调用 成 功 ! "; 

和 
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3.， 有 参数 函数 


PHP 支持 按 值 传递 参数 (默认 ) ， 通 过 引用 传递 和 默认 参数 值 传 递 。 其 特点 分 别 介绍 

如 下 。 
学” 值 传递 参数 : 按 值 进行 参数 传递 是 PHP 的 默认 传递 方式 。 使 用 这 种 方法 ， 必 须 在 
主 程序 调用 时 传递 一 个 值 (参数 ) 。 

% ”引用 传递 :在 按照 值 传递 时 ， 只 有 参数 的 副本 传递 给 被 调用 的 函数 。 但 是 在 被 调 
用 函数 内 部 对 这 些 值 的 任何 修改 ， 都 不 会 影响 调用 未 数 中 的 原始 值 。 引 用 传递 其 
实 也 是 地 址 传递 ， 将 一 个 变量 的 地 址 作为 参数 传递 。 

党 ”默认 值 传递 : 使 用 默认 的 参数 值 的 传递 方法 ， 函 数 必 须 在 调用 时 有 一 个 参数 ， 如 
果 没 有 使 用 的 值 ， 就 把 默认 的 值 传递 给 函数 参数 。 


11.1.3 ”变量 函数 


PHP 支持 变量 函数 的 概念 。 这 意味 着 如 果 一 个 变量 名 后 有 圆 括号 ，PHP 将 寻找 与 变量 
的 值 同名 的 函数 ， 并 且 将 尝试 执行 它 。 除 了 别 的 事件 以 外 ， 这 个 可 以 被 用 于 实现 回调 函数 、 
函数 表 等 。 

变量 函数 不 能 用 于 语言 结构 ,例如 echo0、printO、unsetO、issetO、emptyO、include0、 
require() 以 及 类 似 的 语句 , 需要 使 用 自己 的 外 过 函数 来 将 这 些 结构 用 作 变 量 函数 , 例如 下 面 
的 代码 : 


<?php 
function foo0 { 
echo "In foo0<br />\n";} 
function bar($arg =") { 
echo "In bar(): argument was '$arg'.<br />\n"; 
} 
function echoit($string) { 
| echo $string: } 
$func = 'foo'; 
$func(); 
$func = bar’; 
$func(test): 
$func = 'echoit'; 
$func(test): 
?> 


除了 上 面 的 功能 ， 变 量 函 数 还 可 以 利用 变量 函数 的 特性 来 调用 一 个 对 象 的 方法 ， 代 码 
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<?php 
class Foo{ 
function VariableO{ 
$name = 'Bar': 
S$this->$name(); 
function Bar0{ 
echo "This is Bar":} 
} 
Sfoo = new Foo(); 
Sfuncname = "Variable": 
$foo->$funcname(); 
?> 


11.2 函数 变量 的 作用 域 


在 函数 内 部 声明 的 变量 称 为 局 部 变量 ， 它 只 在 本 模块 中 有 效 ， 不 会 受到 其 他 模块 的 影 
响 ， 同 时 也 保护 程序 不 会 对 外 部 变量 产生 不 必要 的 影响 ， 增 加 了 程序 的 独立 性 和 通用 性 。 
如 果 为 其 增加 static 关键 字 则 变 为 静态 变量 ， 能 够 固定 存放 。 

虽然 变量 的 作用 域 限制 了 变量 的 访问 能 力 ， 但 还 是 可 以 从 函数 外 部 访问 函数 内 部 的 变 
量 ， 从 而 使 得 脚本 更 加 灵活 、 动 态 性 能 更 好 。 


11.2.1 global 语句 


global 语句 允许 从 语句 的 任何 位 置 访问 函数 内 部 定义 的 变量 以 及 从 函数 内 部 访问 函数 
以 外 的 变量 ， 因 此 在 声明 变量 时 ， 必 须 在 变量 前 加 上 global 关键 字 。 
例如 下 面 的 代码 : 


<?php 

$a=1; 

$b=1; 

function Sum() 

{ 

global $a,$b;// 必 须 使 用 global 关键 字 声 明 
$b=$a+$b: 
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> 


上 面 的 程序 执行 的 结果 是 3， 在 函数 中 声明 了 全 局 变量 $a 和 $b， 任 何 变量 的 所 有 引用 
变量 都 会 指向 到 全 局 变量 。 

在 全 局 范围 内 访问 变量 的 第 二 个 方法 ， 是 用 特殊 的 PHP 自 定义 9SGLOBALS 数组 。 

例如 下 面 的 代码 : 


<?PHP 

$a=1; 

$b=1; 

function Sum() 

{ 
$GLOBALS["b"]=$GLOBALS["a"]+$GLOBALS["b"]: 
} 

sum(): 

echo $b; 

?> 


11.2.2 ”static 语句 静态 变量 ) 


变量 范围 的 另 一 个 重要 特性 就 是 静态 变量 。 静 态 变量 在 局 部 函数 域 中 存在 ， 当 程序 执 
行 离开 此 作用 域 时 ， 其 值 并 不 丢失 。 
例如 下 面 的 代码 : 


<?php 
function Test() 
{ 
$a=0; 
Echo $a; 
$att+; 
} 


> 


本 函数 没有 什么 用 处 ， 因 为 每 次 调用 时 都 会 将 $a 的 值 设 为 0 并 输出 “0”， 变 量 加 1 
没有 任何 作用 ， 因 此 一 旦 退出 本 函数 则 变量 $a 就 不 存在 了 。 
要 写 一 个 不 丢失 本 次 计数 值 的 计算 函数 , 要 将 变量 $a 的 定义 为 静态 的 , 例如 下 面 的 代码 : 


<2php 

function TestO 
Static $a=0; 
Echo $a; 
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这 样 每 次 调用 Test0 函 数 都 会 输出 $a 的 值 并 加 1。 


11.3 如 何 使 用 函数 手册 


PHP 函数 功能 十 分 强大 ， 但 开发 者 无 法 记 住所 有 的 函数 ， 所 以 在 记 不 住 函数 时 需要 查 
找 函 数 手册 ， 就 像 人 们 无 法 记 住所 有 汉字 ， 有 时 需要 查找 字典 一 样 。 


11.3.1 ”如 何 得 到 函数 手册 


函数 成 千 上 万 ， 没 有 谁 能 记得 住 这 么 多 函数 ， 该 怎么 办 呢 ? 读者 只 需 打 开 浏览 器 ， 输 
入 PHP 的 官方 网 站 地 址 即 可 ， 具 体操 作 如 下 : 
步 又 1 在 下地 址 栏 中 输入 网 址 “http:/www.phpnetmanual/zh/”， 按 【Enter] 键 打 
开 网 页 ， 如 图 11-1 所 示 。 
步 又 2 在 打开 的 网 页 中 拖 动 滚动 条 ， 滚 动 到 页 面 底部 ， 将 出 现 “ 函 数 参 考 ”， 这 里 
将 显示 函数 的 大 类 ， 如 图 11-2 所 示 。 


Microsoft Internet E 
ET 


@@ 避 -日 国 国 名 


图 11-1 打开 函数 手册 11-2 函数 类 


11.3.2 ” 读 懂 函数 手册 


11.3.1 节 中 打开 了 函数 手册 ， 但 是 如 何 读 懂 它 呢 ? 下 面 我 们 就 以 编辑 图 像 为 例 ， 详 细 
讲解 如 何 使 用 函数 手册 。 

步骤 1 打开 函数 手册 ， 单 击 “Image” 超 链接 ， 如 图 11-3 所 示 。 

和 步骤 2 在 打开 的 网 页 中 介绍 了 该 函数 的 功能 和 所 有 涉及 图 像 的 函数 ， 如 图 11-4 所 示 。 


大 


Wy 


2 新 手 学 做 网 站 


FETTETTPTIEPTCTTE 
Emma 
me -日 - 回 罩 攻 月 mm 丈 wx @ 语 - 台 局 己 


及 加 大 wan rr 


ee tt 


rm A 
人 


图 11-3 单 击 需 要 的 大 类 11-4 查看 函数 的 功能 


步 又 3 拖 动 网 页 滚动 条 , 拖 到 底部 将 发 现 许多 函数 , 后 面 就 注释 此 函数 有 什么 功能 ， 
如 这 里 画 椭 圆 弧 ， 单 击 “imagearc” 超 链接 ， 如 图 11-5 所 示 。 
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图 11-5 单 击 需要 的 函数 


步骤 4 单 击 后 将 出 现 它 的 说 明 ， 一 个 函数 的 表达 式 ， 下 面 会 用 文字 阐述 各 个 参数 是 
什么 ， 然 后 再 举例 ， 以 示范 函数 的 使 用 方法 ， 如 图 11-6 所 示 。 


者 魔力 测试 
在 浏览 器 地 址 栏 中 输入 PHP 官方 网 站 ， 打 开 函 数 手 册 ， 查 找 一 个 关于 压缩 文件 的 函数 ， 
启动 Dreamweaver CS3 后 ， 新 建 一 个 网 页 ， 将 代码 复制 到 网 页 中 ， 按 照 函数 功能 的 解释 编写 一 个 程 
序 ， 可 以 在 线 压缩 成 “zip” 文件 。 


NR 
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BA 
魔法 师 ， 从 上 面 的 说 明 
可 以 看 出 ， 这 里 是 绘制 
了 一 个 贺 形 ， 高 和 宽 都 
是 150px。 


本 4 


11-6 查看 函数 


魔法 档案 
| PHP 虽然 提供 了 函数 手册 ， 但 是 用 户 一 定 要 记 住 常用 的 函数 ， 这 样 有 利于 提高 开发 网 站 
的 速度 。 


11.4 典型 实例 一 编写 读 取 文 件 代码 


要 实现 某 个 功能 必然 要 寻找 一 些 函数 ， 初 学 者 一 定 要 学 会 如 何 查找 到 自己 需要 的 函 
数 ， 然 后 编写 程序 实现 自己 需要 的 功能 。 本 实例 以 编写 “复制 功能 ”为 例 ， 让 读者 掌握 快 
速 查找 函数 并 编写 代码 的 方法 ， 具 体操 作 如 下 : 
步骤 1 启动 Dreamweaver CS3， 新 建 名 为 “file.php” 的 PHP 页 面 ， 如 图 11-7 所 示 。 
步骤 2 打开 浏览 器 ， 在 地 址 栏 中 输入 网 址 “http://www.php.net/manual/zh/”， 进 入 
PHP 手册 页 面 ， 如 图 11-8 所 示 。 
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图 11-7 新 建 页 面 图 11-8 打开 PHP 手册 


和 步骤 3 拖 动 滚动 条 ， 单 击 关 于 文件 的 函数 ， 单 击 “Filesystem” (Filesystem 文件 系 
统 函 数 ) 超 链接 ， 如 图 11-9 所 示 。 

步 又 4 继续 拖 动 滚动 条 , 寻找 功能 函数 , 拖 动 到 底部 , 用 户 会 发 现 “file_get_contents” 
(将 整个 文件 读 入 一 个 字符 串 ) 函数 ， 单 击 这 个 超 链接 ， 如 图 11-10 所 示 。 
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图 11-9 单 击 “ 文 件 系统 ” 超 链接 图 11-10 单 击 “拷贝 文件 ” 超 链接 


步 又 5 用 户 会 发 现 file get contents 函数 的 用 法 ， 然 后 给 出 file_get_contents 的 函数 
格式 ， 在 下 面 解释 函数 的 参数 的 作用 ， 如 图 11-11 所 示 。 
步 又 6 在 站 点 目录 下 ， 新建 一 个 名 为 “china.txt” 的 文件 ， 在 其 中 输入 文字 ， 在 新 建 
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交 二 


的 PHP 文件 中 编写 代码 ,使 用 这 个 函数 将 文件 的 内 容 读 出 来 ,效果 如 图 11-12 
所 示 (光盘 :\ 最 终 效 果 \ 第 11 章 \china.txt ) 。 
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后 :应 法 师 ， 当 我 查找 到 般 要 的 函数 后 ， 该 如 何 理解 它 的 参 讨 ， 有 没有 技 7? 
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11-11 他 get_contents 函数 图 11-12 最 终结 果 


11.5 常见 问题 解答 


函数 的 参数 大 多 数 都 是 一 些 变量 赋予 的 值 ， 用 户 可 以 单独 修改 ， 也 可 以 新 建 一 个 
PHP 页 面 ， 然 后 将 代码 复制 到 新 建 的 页 面 中 ， 进 行 调试 ， 成 功 预览 后 ， 再 修改 代 
码 中 的 单一 参数 观察 其 最 终结 果 的 变化 ， 从 而 熟悉 这 个 函数 的 使 用 方法 。 这 是 初 
学 者 学 习 函 数 的 途径 ， 参 数 是 函数 重要 的 部 分 ， 用 户 读 懂 函 数 的 标准 实际 上 就 是 


读 懂 参 数 。 


& 函数 编写 时 会 出 错 这 是 无 法 避免 的 ， 任 何 一 个 优秀 的 程序 设计 师 在 设计 程序 时 ， 都 
难免 会 出 错 ， 当 你 编写 错误 时 ， 网 页 中 会 报 出 错误 在 哪 一 行 、 有 多 少 个 错误 ， 然 后 


魔法 师 ， 在 编写 函数 时 ， 难 免 会 出 错 ， 我 们 该 怎么 样 避 免 这 一 情况 ? 


对 其 修改 再 运行 ， 直 到 没有 错误 为 止 。 


诬 : 


Ss 法 | 
‘4 新 手 学 做 网 站 - 


11.6 过 关 练 习 


(1) 打开 PHP 手册 寻找 到 向 文件 写 入 文本 的 函数 ， 查 找到 后 将 会 出 现 如 图 11-13 所 
示 的 页 面 ， 然 后 参考 该 函数 ， 写 一 段 录 入 文件 的 代码 。 
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(2) 打开 PHP 手册 找到 读 取 记事 本 文件 的 函数 〔 如 图 11-14 所 示 ) ， 然 后 参考 函数 
写 一 段 读 取 记事 本 文件 的 代码 。 
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图 11-14 读 取 函 数 


交互 网 页 的 纽 囊 一 一 表单 


表单 的 创建 
表单 对 象 的 添加 
表单 的 美化 
获取 表单 数据 


典型 实例 一 一 调查 资料 的 提交 
Sy 


小 魔女 : 


魔法 师 : 


小 魔女 : 这 
魔法 师 : 


小 魔女 


网" 多 霸 体 教学 演示 : 26 分 外 


我 在 浏览 其 他 网 站 时 发 现 ， 那 
些 网 站 中 都 有 复 选 框 、 文 本 框 、 
下 拉 菜 单 等 内 容 ， 这 些 该 如 何 
制作 呢 ? 

你 看 到 的 那些 对 象 叫 做 表单 ， 
它 是 实现 交互 功能 的 纽带 ， 和 
动态 语言 结合 后 能 制作 出 漂亮 


可 难 了 ,我 不 会 制作 表单 。 
别 着 急 ， 我 会 教 你 制作 表单 , 
你 坐 下 ， 安 心 听讲 吧 。 

: 好 ， 魔 法 师 ， 您 讲 吧 ! 


zs 新 手 学 做 网 站 


12.1 表单 的 创建 


当 用 户 在 浏览 网 页 时 ， 经 常会 遇 到 需要 浏览 者 填写 信息 的 页 面 ， 如 邮箱 注册 、 论 坛 会 
员 注册 等 ,这 些 用 来 收集 用 户 信息 的 网 页 的 构成 元 素 就 是 表单 ,如 图 12-1 所 示 就 是 一 个 婚 
介 网 站 的 表单 。 
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丁 ] 因 
12-1 表单 


看 到 了 表单 后 ， 初 学 者 一 定 想 知道 怎么 制作 表单 。 制 作 表单 的 具体 操作 如 下 : 

步 又 1 启动 Dreamweaver CS3， 将 插入 栏 切换 到 “表单 ”选项 卡 ， 将 光标 插入 点 定 
位 到 所 需 位 置 ， 如 图 12-2 所 示 。 

步 又 2 单 击 “ 表 单 ”选项 卡 中 的 “表单 ”按钮 回 或 选择 【插入 〗/【 表 单 〗/【 表 单 】 
命令 ， 即 可 在 编辑 窗口 中 添加 表单 ， 如 图 12-3 所 示 。 
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步骤 3 将 鼠标 光标 定位 到 “属性 ” 栏 的 “表单 名 称 ”文本 框 中 , 输入 “zhuce” 文 本 ， 
在 “方法 ”下 拉 列 表 框 中 选择 选项 ， 如 “POST”， 在 “动作 ”文本 框 中 输入 
处 理 这 张 表单 的 名 称 ， 如 “biaodan.php”， 如 图 12-4 所 示 。 


~、 A 


re 
口 | 口 各 外 | 昭 回 园 | 回 团 回 四 口 | 多 口 | 号 
Ez 表单 提交 处 理 方法 有 “POST” 和 
Peer “GET”, 它 们 的 区 别 是, 前 者 功能 强 
大 后 者 弱小 , 前 者 安全 性 高 后 者 低 , 在 
简单 的 动态 网 页 中 可 以 用 “GET” 方 法 
提交 ， 复 杂 一 点 的 用 “POST”， 在 制 
作 网 页 时 ， 大 多 数 用 “POST” 方 法 。 


图 12-4 设置 “表单 ”属性 


12.2 表单 对 象 的 添加 


表单 就 好 比 一 个 碗 一 样 ， 它 本 身 只 是 一 个 容器 ， 至 于 用 来 盛 饭 还 是 盛 菜 完全 取决 于 用 
户 ， 真 正 让 表单 起 到 作用 的 ， 是 在 里 面 放 入 的 对 象 。 表 单 对 象 比 较 多 ， 但 是 常用 的 只 有 那 
么 几 种 , 如 文本 框 、 文本 区 域 、 按钮 、 复 选 框 等 , 创建 它们 也 十 分 简单 。 在 Dreamweaver CS3 
的 “表单 ”选项 卡 中 单 击 相应 的 表单 对 象 后 ， 就 会 弹出 相应 的 向 导 对 话 框 ， 用 户 可 按照 提 
示 完 成 ， 然 后 选择 对 象 ， 对 其 对 象 进行 设置 。 下 面 以 创建 文本 框 和 按钮 为 例 进行 讲解 ， 有 具 
体操 作 如 下 : 
步 又 1 将 光标 插入 点 定位 到 相应 的 位 置 ， 选 择 “表单 ”选项 卡 中 的 相应 按钮 ， 这 里 
单 击 “文本 字段 ”按钮 世 ] ， 如 图 12-5 所 示 。 
步 又 2 弹出 “功能 属性 ”对 话 框 ， 对 话 框 中 有 两 项 十 分 重要 ， 一 个 是 ID 文本 框 ， 
它 代 表 文本 框 程序 中 的 名 称 ,相当 于 变量 ， 这 里 输入 “user”; 还 有 一 个 “ 标 
签 文字 ”文本 框 , 是 显示 给 浏览 者 看 的 , 这 里 输入 “用 户 名 : ”。 单 击 亡 枉 ] 
按钮 ， 如 图 12-6 所 示 。 


si 

表单 对 象 的 “ID” 十 分 重要 ， 它 在 程序 中 相当 于 变量 ， 给 它 命名 时 ， 一 定 要 根据 网 页 功 
能 给 它 取 一 个 比较 客观 的 名 字 ， 标 签 文字 是 显示 给 浏览 者 的 ， 用 来 提示 用 户 这 里 该 输入 什么 。 初 学 
者 在 这 两 处 命名 时 ， 一 定 要 注意 ， 禁 止 使 用 默认 名 。 
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12-5 单 击 “ 文 本 字段 ”按钮 12-6 设置 功能 属性 


在 操作 界面 中 换行 ， 用 相同 的 方法 ,插入 一 个 作为 “password”、 标 签 文字 
为 “密码 : ”字段 的 文本 框 ， 选 择 它 ， 在 “属性 ”面板 中 可 以 设置 其 宽度 和 
最 多 字符 数 。 类 型 有 3 个 选项 ， 这 里 因为 是 密码 ， 所 以 选中 加 覃 吗 单 选 按钮 ， 
在 “初始 值 ” 文 本 框 中 可 以 输入 文字 ， 提 示 浏 览 者 ， 也 可 以 空 着 不 输入 ， 如 
图 12-7 所 示 。 

在 操作 界面 中 换行 ， 用 相同 的 方法 单 击 “按钮 ”按钮 E ， 在 弹出 的 功能 “ 属 
性 ”对 话 框 中 的 “ID” 文 本 框 中 输入 “button” ， 文 本 框 中 可 以 不 输入 ， 单 
击 书 枉 - 按钮， 选择 文档 中 的 按钮 ， 用 相同 的 方法 创建 一 个 按钮 ， 然 后 选择 
它 ， 将 值 修改 为 “取消 ”， 然 后 选中 辐 道 流散 草 泣 选 按钮 ， 如 图 12-8 所 示 。 
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12-8 设置 “按钮 ”属性 
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步 又 5 保存 文档 ， 按 【F12] 键 进行 预览 ， 最 终 效果 如 图 12-9 所 示 (光盘 :\ 最 终 效果 
\ 第 12 章 \bd.php ) 。 
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图 12-9 最 终 效 果 


12.3 表单 的 美化 


网 页 表单 按 原 始 摆 放 是 不 够 美观 的 ， 从 前 面 的 讲解 中 ， 也 许 有 的 读者 已 经 发 现 这 个 问 
题 了 ， 我 们 创建 的 表单 十 分 丑陋 ， 与 网 上 看 到 的 表单 相 比 ， 有 天 壤 之 别 ， 那 如 何 美化 表 
单 呢 ? 

美化 表单 实际 上 是 一 个 十 分 简单 的 操作 ， 表 单 的 美化 同样 是 使 用 CSS 样式 ， 下 面 就 开 
始 美化 表单 ， 具 体操 作 如 下 : 


“六 3 用 浊 局 方 生 乔 基 | Spcy 六 吉 | 履 枯 直 
日 | 口 凡 外 | 驯 回 轩 | 回 四 | 里 加 品 | 回 器 | 吕 名 马 国 
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小 魔女 ， 插 入 表单 对 象 前 ， 用 户 
可 以 插入 表格 ， 将 表格 的 边框 设 
置 为 “0”; 然后 在 单元 格 中 插入 
对 象 ， 根 据 实际 拖 动 表格 的 宽度 
和 高 度 ， 固 定 表单 对 象 实际 上 也 
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图 12-10 打开 文件 
步骤 2 选择 层 的 CSS 样式 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “编辑 ”命令 ， 在 弹出 


新 手 学 做 网 站 


步骤 6 


的 对 话 框 中 ， 将 背景 颜色 设置 成 “#6F6F6”， 背 景 颜色 点 淡 了 一 些 
图 12-11 所 示 。 

继续 使 用 CSS 样式 对 网 页 中 的 文字 、 表 格 的 宽度 和 高 度 进行 设置 。 
新 建 一 个 名 为 “submitButton” 的 CSS 类 文件 ， 在 类 型 列表 中 ， 将 字号 设置 
为 “12” 号 ， 颜 色 为 白色 。 

选择 “背景 ”选项 ， 将 背景 颜色 设置 成 “#A6D3AE”， 选 择 “ 方 框 ”选项 ， 
将 高 度 和 宽度 设置 成 “100” 和 “25”, 在 “边界 ” 栏 中 的 “ 左 ”文本 框 和 “上 ” 
文本 框 中 输入 “186” 和 “20”。 

选择 “边框 ”选项 ,设置 样式 为 “ 实 线 ”， 宽 度 为 “2px”， 在 “颜色 ” 栏 中 ， 
将 上 设置 成 “#ABD8B3”、 右 设置 成 “#5880SF”、 下 设置 成 “#S8805F”、 
左 设置 成 “#ABD8B3”， 前 面 3 步 都 是 按钮 ， 设 置 完 成 后 如 图 12-12 所 示 。 
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步骤 7 


Tal 二 手相 坊村 
CBRE em 
图 12-11 设置 背景 图 12-12 设置 按钮 


设置 完成 后 ， 按 【F12] 键 预览 网 页 ， 效 果 如 图 12-13 所 示 (光盘 :\ 最 终 效果 \ 
第 12 章 \meihtml) 。 
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12-13 “最终 效果 


12.4 获取 表单 数据 


表单 是 交互 网 页 中 的 一 个 重要 内 容 ， 表 单 本 身 只 用 来 给 浏览 者 输入 信息 ， 不 具备 处 理 
数据 的 能 力 ， 但 是 表单 的 数据 不 处 理 就 会 变 得 毫 无 价值 ， 所 以 需要 借助 动态 交互 语言 获取 
表单 数据 。 获 取 表 单数 据 的 方法 有 全 局 变量 、$GET 和 $POST3 种 ， 它 与 12.1 节 中 制作 表 
单 时 选择 提交 的 方法 (表单 属性 的 动作 〉 是 一 一 对 应 的 。 


魔法 档案 
在 实际 的 应 用 中 POST 方法 应 用 范围 比较 广泛 ， 在 许 许多 多 的 表单 中 ， 人 们 设计 时 ， 都 习 
惯 使 用 POST， 建 议 读 者 朋友 也 使 用 POST 获取 表单 数据 信息 。 


12.4.1 文本 框 数据 的 获取 


文本 框 是 表单 比较 常见 的 元 素 ， 常 用 于 输入 用 户 名 、 地 址 、 密 码 等 一 些 信息 。 下 面 是 
一 个 简单 的 文本 框 表单 元 素 ， 代 码 如 下 : 


<input name="login" maxlength=25 size="6" maxlength="25" /> 


文本 框 的 名 称 是 “login”， 在 处 理 页 面 时 ， 可 以 用 下 面 几 种 方法 来 处 理 获取 文本 框 的 

信息 。 介 绍 如 下 : 
%* 全 局 变量 : 直接 通过 全 局 变量 来 获取 数据 ， 如 “echo $login;” (将 获取 的 数据 显 

示 出 来 ) 。 
用 GET 方法 提交 的 网 页 : $ GET[' 表 单 中 的 对 应 变量 '], 如 echo$ GET[login] (将 
获取 的 数据 显示 在 网 页 里 ) 。 
用 POST 方法 提交 的 网 页 : $_POST[' 表 单 的 对 应 变量 ]， 如 echo $_POST['login'] 
(将 获取 的 数据 显示 在 网 页 里 ) 。 
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12.4.2 ” 单 选 按钮 数据 的 获取 


单 选 按钮 表示 从 多 个 选项 中 选择 一 个 , 一 般 情况 下 , 同一 组 单 选 按钮 的 名 称 是 一 样 的 。 
假如 有 多 个 单 选 按钮 在 实际 提交 数据 时 ，PHP 只 会 分 配 一 个 变量 给 该 组 单 选 按钮 ， 代 码 
如 下 : 


<input type="radio" name="RadioGroupl" value="1" id="RadioGroupl_0"/> 
<input type="radio" name="RadioGroupl" value="2" 1d="RadioGroupl 1"/> 


以 上 代码 创建 了 一 组 两 个 单 选 按 钮 ， 按 钮 的 名 称 为 “RadioGroup1”， 但 是 Value 的 值 
有 两 个 ， 分 为 “1” 和 “2”， 提 交 后 ， 假 如 用 户 选择 了 “1”， 则 该 变量 的 值 就 是 1， 如果 
为 “2”， 则 该 变量 的 值 为 2， 依 此 类 推 。 
要 获取 单 选 按钮 的 值 可 采用 下 面 两 种 方法 ， 分 别 介绍 如 下 。 
党 用 GET 方法 提交 的 表单 数据 : 通过 “$_GET["RadioGroupl"]” 获 取 单 选 按钮 
的 值 。 
党 ”用 POST 方法 提交 的 表单 数据 : 通过 “$_ POST["RadioGroupl"]” 获 取 单 选 按钮 
的 值 。 


12.4.3” 复 选 框 数 据 的 获取 


复 选 框 表示 可 以 选择 多 个 选项 ， 比 如 爱好 ， 喜 欢 吃 什么 水 果 等 。 一 般 来 说 ， 同 一 组 复 
选 框 的 名 称 是 不 一 样 的 , 但 可 以 都 一 样 。 下 面 是 一 段 HTML 语言 ， 写 的 是 一 组 复 选 框 的 代 
码 ， 代 码 如 下 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 你 喜欢 吃 什么 样 的 水 果 </title> 

</head> 

<body> 

<form action="show.php" method="post"> 

<input name="orange" type="checkbox" value="orange" > 桶 子 <br> 
<input name="apple" type="checkbox" value="apple" > 苹果 <br> 
el <input name="banana" type="checkbox" value="banana" > 香 若 <br> 
<input name="pear" type="checkbox" value="pear" > 梨 <br> 

<input name="submit" type="submit" value=" 提 交 " /> 

<input name="reset" type="reset" value=" 重 置 " /> 

</form> 

</body> 

</html> 
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通过 以 前 的 学 习 ， 相 信 大 家 知道 上 面 的 代码 写 的 是 什么 


， 通 过 浏览 器 运行 得 到 如 
图 12-14 所 示 的 界面 。 
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12-14 运行 的 界面 
上 面 的 一 组 复 选 框 通过 什么 来 获得 呢 ? 由 于 它们 名 称 不 一 样 ， 与 其 他 表单 属性 不 一 
样 ， 且 它 由 多 个 变量 组 成 ， 即 该 复 选 框 没有 被 选中 ， 直 接 获 取 复 选 框 的 代码 如 下 : 
<?php 
echo $ POST[orange]; 
echo $_ POST[apple]: 
echo $_ POST[bananaj]: 


echo $_ POST[pear]; 
?> 


新 建 一 个 名 为 “show.php” 的 网 页 ， 然 后 输入 上 面 的 代码 并 保存 ， 因 为 是 通过 POST 
方法 提交 的 ， 所 以 得 用 $_POST 方法 获取 数据 。 因 为 4 个 复 选 框 名 称 不 一 样 ， 所 以 用 4 个 
不 同 的 变量 来 输出 ， 运 行 该 网 页 ， 假 设 在 网 页 中 选中 加 栖 ? 复 选 框 、 四 第 果 复 选 框 ， 单 击 攻 到 
按钮 ， 将 会 出 现 如 图 12-15 所 示 的 结果 。 
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图 12-15 运行 后 的 结果 
| 魔法 档案 


如 果 用 GET 方法 提交 ， 自 然 用 $_GET 方法 获取 ， 用 它 需 要 写 语句 判断 是 不 是 为 空 ， 或 者 
为 出 错 ， 如 书写 第 一 个 复 选 框 的 语句 是 这 ! empty($_GET['orange']), 然 后 再 输出 的 语句 echo 
$_GET[orange]: 后 面 三 个 用 同样 的 方法 ， 书 写 完毕 后 ， 就 可 以 得 到 如 图 12-15 所 示 的 结果 。 
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12.5 典型 实例 一 一 调查 资料 的 提交 


本 章 学 习 了 如 何 建 立 表单 ， 表 单 对 象 的 添加 、 美 化 ， 以 及 获取 表单 数据 。 美 化 表单 实 
际 上 就 是 使 用 CSS 代码 ， 本 节 实 例 将 着 重 练习 如 何 创建 表单 ， 然 后 获取 表单 信息 。 下 面 以 
创建 一 个 调查 表 为 例 进行 讲解 ， 最 终 效果 如 图 12-16 所 示 。 
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图 12-16 最 终 效果 
具体 操作 如 下 : 
和 步骤 1 启动 Dreamweaver CS3， 新 建 一 个 名 为 “index.php” 的 页 面 ， 插 入 一 个 3 行 
1 列 的 表格 ， 将 表格 的 边框 设置 为 “0”。 
步骤 2 将 “bjjpg” 作 为 背景 插入 在 表格 中 ， 在 表格 第 二 行 中 插入 表单 ， 将 表单 名 设 
置 为 “form1”， 在 “动作 ”文本 框 中 输入 “showgood.php”, 在 “方法 ”下 
拉 列 表 框 中 选择 “POST” 选 项 ， 在 “MIME 类 型 ”文本 框 中 输入 


“multipart/form-data”， 如 图 12-17 所 示 。 
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图 12-17 “属性 ”面板 
步骤 3 插入 8 行 2 列 的 表格 ， 将 表格 的 边框 设置 为 “1”， 颜 色 为 黑色 ， 如 图 12-18 
所 示 。 
步骤 4 在 表格 中 插入 表单 对 象 、 输 入 文字 ， 并 设置 文字 和 表单 ， 如 图 12-19 所 示 。 
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12-18 插入 表格 12-19 插入 表单 元 素 
步骤 $ 新 建 一 个 名 为 “showgood.php” 的 页 面 ， 将 代码 删除 ， 输 入 如 下 代码 : 
<?php 


echo $ POST[user]; 
echo "<br />"; /显示 姓名 文本 框 的 数据 
echo $ POST[adre]:; 
echo "<br />"; /显示 地 址 文本 框 的 数据 
echo $_ POST[checkbox]; 
echo "<br />"; 
echo $_ POST[checkbox2]:; 
echo "<br />";， /显示 “喜欢 的 食物 ” 复 选 框 的 数据 
echo $_ POST[jieshou]: 
echo "<br />": 
echo $ POST[bujieshou]: 
echo "<br />"; // 显 示 “ 是 否 接受 新 鲜 的 食物 ” 单 选 按钮 的 数据 
echo $ POST[gao]: 
echo "<br />": 
echo $ POST[zhong]:; 
echo "<br />": 
echo $ POST[di]: 
echo "<br />": /显示 “生活 水 平 ” 单 选 按 钮 的 数据 
echo $ POST[zhiwei]: 


echo "<br />": /显示 “你 的 职位 ”下 拉 列 表 的 数据 
Ps 
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和 步骤 6 按 【F12】 键 预览 网 页 ， 在 网 页 中 输入 信息 ， 将 会 得 到 如 图 12-16 所 示 的 结果 
( 光 瘟 :\ 最 终 效果 \ 第 12 章 \Ix\index.php) . 


12.6 常见 问题 解答 


向 : 记 法 是 我 在 博客 时 ， 发 现 提交 的 表单 十 分 漂 施 ， 我 该 如 何 制 作 它 ? 


全 你 说 的 是 在 线 编辑 器 ， 它 是 表单 的 一 种 ， 现 在 有 许多 在 线 编辑 器 十 分 漂亮 ， 如 新 浪 、 
博客 的 在 线 编辑 器 。 编 辑 它 需要 特殊 的 语言 JavaScprit, 所 以 制作 出 这 样 漂亮 的 编辑 
器 需要 一 定 的 功底 ， 不 过 初学 者 不 要 泪 形 ， 网 上 免费 提供 很 多 的 在 线 编辑 源 代码 ， 
用 户 下 载 下 来 直接 使 用 就 可 以 了 。 


本: 庆 渍 ， 在 实际 制作 过 程 中 ， 制 作 了 表单， 然后 通过 PHP 动态 语 各 获取 了 表单 所 
还 需要 做 些 什么 ? 


人 在 网 站 的 一 般 制作 中 ， 用 户 编写 了 获取 表单 的 代码 ， 然 后 一 般 是 连接 数据 库 ， 将 获 
得 的 表单 信息 写 入 数据 库 。 


12.7 过 关 练习 


制作 一 个 登录 信息 窗口 , 然后 收集 用 户 输入 的 登录 信息 , 最 终 效果 如 图 12-20 所 示 ( 光 
盘 :\ 最 终 效 果 \ 第 12 章 \lianxivdenglu.php) 。 
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12-20 最终 效果 


神秘 的 数据 库 (MySQL) 


数据 库 页 面 管 理 
数据 库 窗口 管理 
数据 库 编 程 

SQL 语句 的 应 用 


典型 实例 一 一 连接 并 选择 数据 
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由 u 多 霸 体 教学 演示 : 19 分 钟 


动态 网 页 中 大 多 数 数据 都 要 存 
储 起 来 ， 而 负责 完成 这 一 重要 
工作 的 就 是 数据 库 。 

哦 ， 那 什么 是 数据 库 ? 我 该 如 
何 使 用 它 呢 ? 

数据 库 就 是 用 来 装载 数据 的 工 
具 。 目 前 市 场 上 有 许多 数据 库 
软件 , 如 Access、SQL Sever、 
DB2, 而 与 PHP 完美 搭配 的 是 
MySQL ， 本 章 将 对 其 进行 重点 
讲述 。 

数据 库 简单 吗 ? 

十 分 简单 ， 就 和 Office 中 的 
Excel 差不多 。 
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13.1 数据 库 页 面 管理 


在 第 2 章 中 我 们 曾 安装 了 一 个 名 为 PHPnow 的 集合 包 , 那里 面 就 有 MySQL 数据 库 页 面 管 
工具 PHPMyAdmin， 所 以 这 里 只 需 在 浏览 器 中 输入 网 址 “http://127.0.0.1/phpmyadmin/” 即 
[打开 PHPMyAdmin， 然 后 对 数据 库 进行 页 面 管理 。 如 何 打开 页 面 在 2.2.4 节 讲 解 过 ， 这 里 不 
再 痪 述 。 


13.1.1 创建 数据 库 


数据 库 就 相当 于 一 个 容器 ， 其 中 分 成 了 若干 板块 ， 如 表 、 索 引 、 存 储 过 程 等 。 如 果 需 
要 装 入 数据 ， 首 先 就 得 创建 数据 库 ， 然 后 在 数据 库 中 建立 表 ， 从 而 达到 存储 数据 的 目的 
这 里 以 新 建 db300 数据 库 为 例 ， 详 细 讲 解数 据 库 的 创建 过 程 。 具 体操 作 如 下 
步 又 1 打开 页 面 管理 工具 PHPMyAdmin， 输 入 用 户 名 和 密码 ， 进 入 其 管理 首页 。 
步 又 2 在 右 侧 的 “创建 一 个 新 数据 库 ”文本 框 中 输入 数据 库 名 称 ， 如 “db300”， 单 
击 四 按钮 ， 如 图 13-1 所 示 。 
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图 13-1 phpMyAdmin 管理 首页 
步骤 3 完成 数据 库 建立 将 跳 转 到 另 一 个 页 面 ， 如 果 数 据 库 创建 成 功 ， 将 会 在 右边 提 
示 db300 数据 库 已 经 建立 ; 如 果 还 需要 建立 表 ， 在 右 侧 下 方 的 “名 字 ” 文 本 
框 中 输入 表 的 名 称 ， 如 “user”， 然 后 在 “字段 数 ” 文 本 框 中 输入 所 需 数值 ， 
如 “3”， 单 击 欧 引 按 钮 即 可 创建 表 ， 如 图 13-2 所 示 。 


2 ”魔法 档案 
数据 库 中 出 现 的 关键 字 尽 量 不 要 出 现 汉语 ， 最 好 以 字母 、 下 划 线 和 数字 命名 ,命名 时 尽量 
包含 一 定 的 意义 ， 如 user， 别 人 一 看 ， 就 知道 这 个 是 用 户 表 。 
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13-2 创建 表 
步骤 4 跳 转 到 设置 字段 的 网 页 ， 在 此 需 设置 字段 的 一 些 属性 ， 如 图 13-3 所 示 
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图 13-3 设置 字段 
步骤 5 设置 完成 后 ， 单 击 [本 按钮， 数据库 中 第 一 张 表 就 建 好 了 。 


】 。 魔法 档案 
在 网 页 与 数据 库 的 应 用 过 程 中 ， 数 据 库 中 表 的 字段 应 该 与 表单 对 象 名 、 中 间 转 换 的 变量 
一 一 对 应 ， 长 度 对 应 ， 类 型 也 要 对 应 。 数 据 库 设计 十 分 重要 ， 它 能 确定 表单 的 结构 ， 如 果 两 者 不 统 
一 ， 则 不 能 将 数据 放 入 数据 库 。 
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13.1.2 ”编辑 数据 库 


数据 库 创 建 完成 后 ， 难 免 会 出 现 差 错 ， 这 时 就 需要 用 户 对 数据 库 内 容 进 行 编辑 。 编 辑 
数据 库 的 方法 十 分 简单 ， 具 体操 作 如 下 : 
步骤 1 单 击 左 边 需要 编辑 的 数据 库 名 称 ， 如 “db300”， 在 如 图 13-4 所 示 的 图 中 ， 
用 户 可 以 根据 需要 为 数据 库 建 立 其 他 表 ， 操 作 与 13.1.1 讲解 相同 。 用 户 还 可 
以 单 击 右 上 边 的 “操作 ” 超 链接 ， 对 数据 库 进 行 复制 、 重 命名 等 操作 。 


rp 呈 单 击 这 里 ， 可 以 对 数据 库 
二 重 命名 , 以 及 复制 数据 库 、 
一 = 册 除 数据 库 等 操作 


13-4 ”编辑 数据 库 


步骤 2 如 需要 编辑 表 ， 只 需 选 择 网 页 右上 方 的 表 如 “user”， 在 下 方 选中 需要 修改 
的 字段 ， 单 击 “更 改 ” 按 钮 太 ， 如 图 13-5 所 示 。 
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13-5 ”选择 需要 修改 的 字段 


里 又 3 ”打开 如 图 13-6 所 示 的 页 面 ,其 操作 方法 与 创建 时 大 致 相同 ,用户 可 根据 自己 
的 需要 进行 修改 ， 修 改 完成 后 ， 单 击 [区 可 | 按钮 。 
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图 13-6 修改 字段 
】 魔法 档案 
phpMyAdmin 是 一 款 优秀 的 MySQL 数据 库 管理 工具 ， 其 操作 十 分 方便 . 它 相当 于 一 个 功 
能 强大 的 网 站 ， 初 学 者 热 悉 它 后 ， 就 会 领 司 到 其 强大 的 功能 ， 这 里 就 不 一 一 讲解 了 。 


13.2 数据 库 窗口 管理 


习惯 了 窗口 操作 的 用 户 ， 很 不 习惯 数据 库 的 操作 在 网 页 中 进行 ， 这 时 可 用 第 三 方 公司 
开发 的 数据 库 窗口 管理 小 软件 ， 如 MySQL-Fomt、Navicat、SQLyog Enterprise、MySQLCC 
等 进行 操作 。 下 面 以 Navicat8.0 为 例 ， 讲 解数 据 库 窗口 管理 。 具 体操 作 如 下 : 

步骤 1 安装 Navicat8.0， 启 动 它 ， 单 击 “ 连 接 ” 按 钮 吓 ， 如 图 13-7 所 示 。 
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步骤 2 弹出 “连接 ”对话 框 , 在 “主机 名 /P 地 址 ”文本 框 中 输入 地 址 , 如 “127.0.0.1”， 
在 “ 坊 ” 文 本 框 中 输入 对 应 的 端口 号 ， 如 “3306”， 在 “用 户 名 ”和 “密码 ” 
文本 框 中 输入 相应 的 信息 ， 然 后 单 击 已 蚂 ] 按 钮 ， 如 图 13-8 所 示 。 

步 又 3 选择 左边 的 “127.0.0.1” 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “打开 连接 ” 命 
令 ， 连 接 数 据 库 服务 器 ， 如 图 13-9 所 示 。 


Havicat 8 Lite for WySQL 


[BR [ss |534 [hrrp | 
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密码: 

3 
ET mn 
13-8 “连接 ”对 话 框 图 13-9 连接 数据 库 服务 器 


和 步骤 4 将 鼠标 光标 停留 在 左边 的 任意 位 置 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “创建 
数据 库 ” 命 令 ， 如 图 13-10 所 示 。 

步骤 5 弹出 “创建 新 数据 库 ” 对 话 框 ， 在 “键入 数据 库 名 ”文本 框 中 输入 数据 库 名 
称 ， 如 “susan”， 单 击 C 绎 按钮， 如 图 13-11 所 示 。 


Navicat 8 Lite for Iy5Q 


ite for ly 
文件 中 本 看 工具 四 则 口 虽 和 二 吕 


国 时 和 急 本 


峡 wonaon_ sehene 
ysal 


a 
a 


13-10 选择 “创建 数据 库 ” 命 令 图 13-11 “创建 新 数据 库 ” 对 话 框 


步 又 6 选择 susan 根 目录 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “打开 数据 库 ” 命 令 。 
步骤 7 选择“ 表 ” 子 目录 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “创建 表 ” 命 令 ， 如 


法 村 
最 条/ 第 13 章 神秘 的 数据 库 (M3SQL) 着 法 忆 


图 13-12 所 示 。 
步 又 8 弹出“ 表 设计 ”对 话 框 ， 用 户 可 在 此 设置 字段 ， 设 置 完成 后 单 击 局 gz 按钮 ， 
如 图 13-13 所 示 。 
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图 13-12 选择 “创建 表 ” 命 令 图 13-13 创建 字段 


步 又 9 弹出 “ 表 名 ”对 话 框 ， 在 “键入 表 名 ”文本 框 中 输入 表 名 ， 如 “notebook”， 
如 图 13-14 所 示 。 
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图 13-14 “ 表 名 ”对 话 框 


步骤 10 选择 notebook 并 右 击 , 在 弹出 的 快捷 菜单 中 选择 “设计 表 ” 命令 ， 如 图 13-15 
所 示 。 
步骤 11 弹出 “ 表 设计 ”对 话 框 ， 修 改 字段 属性 ， 单 击 日 按钮 ， 如 图 13-16 所 示 。 
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图 13-15 选择 “设计 表 ” 命 令 图 13-16 修改 表 


) 魔法 档案 
在 对 数据 库 进 行 操作 时 ， 对 于 网 页 初学 者 来 说 ， 表 设计 是 需要 掌握 的 重点 ， 而 其 中 的 字段 
属性 更 是 重 中 之 重 ， 它 的 好 坏 决定 了 整个 数据 库 的 好 坏 。 


13.3 数据 库 编程 


当 建 立 好 数据 库 后 ， 在 设计 网 站 的 过 程 中 其 实 就 是 用 交互 语言 去 操作 数据 库 ， 也 就 是 
数据 库 编程 。 初 学 者 在 数据 库 编程 中 需要 牢 牢 掌握 连接 数据 库 、 选 择 数据 库 、 查 询 数据 库 、 
追加 记录 、 删 除 记录 和 获取 记录 等 知识 ， 下 面 将 详细 讲解 。 


13.3.1 连接 数据 库 


连接 数据 库 实 际 上 是 对 数据 库 进 行 连接 操作 ， 用 户 可 以 按照 第 12 章 讲解 的 方法 查询 
自己 需要 的 函数 。 通 过 查询 ， 用 户 可 获得 如 下 连接 MySQL 数据 库 的 函数 。 

resource Imysql_ connect ([ string $server [, string $username [, string $password [, bool 
Snew_link [, int $client flags ]]]]] ) 

其 中 参数 介绍 如 下 。 

党 ”server: MySQL 服务 器 地 址 ， 包 括 端口 号 。 例 如 ，http://127.0.0.1: 3306， 其 中 
3306 便 是 MySQL 的 默认 端口 号 ， 可 以 不 写 。 
Username: 用 户 名 ， 默 认 值 是 服务 器 进程 所 有 者 的 用 户 名 。 
password: 密码 ， 默 认 值 是 空 密码 。 
new_link: 如 果 用 同样 的 参数 第 二 次 调用 mysql_connect(), 将 不 会 建立 新 的 连接 ， 
而 是 返回 已 经 打开 的 连接 标识 ， 参 数 new_link 改变 此 行为 并 使 my_connect0 总 是 


9 


J 
D2 


te 


人 


一 学 融会 谨 法 书简 


wa ! 第 13 章 神秘 的 数据 库 (M3SQL) 


法 村 
时 法 已 
打开 新 的 连接 ， 甚 至 当 mysql connect 曾 被 用 同样 的 参数 调用 过 时 。 


党 client_ flags: client flags 可 以 和 其 他 常用 参数 组 合 ， 如 压缩 通信 协议 常量 
MYSQL CLIENT_ COMPRESS、 允 许 在 函数 名 后 留 空格 位 常量 MYSQL _CLIENT 
_IGNORE SPACE. 

通常 情况 下 ， 后 面 两 个 参数 不 使 用 ， 只 需要 使 用 前 面 的 3 个 参数 就 可 以 了 。 如 要 连接 

创建 的 susan 数据 库 ， 可 以 采用 以 下 语句 连接 。 


$link=mysql connect(localhost,root, '1234"):; 


如 果 函 数 调用 成 功 ， 则 会 返回 连接 句柄 ; 如 果 失败 ， 则 会 返回 False。 下 面 通过 实例 来 
讲解 。 输 入 下 面 的 代码 : 


<?php 
Slink = mysql_connect('127.0.0.1', root', '1234"); 
(ISlink) { 
die(' 失 败 : '. mysql_error()); 
} 


echo ' 连 接 成 功 ， 服 务 器 信息 : 'mysql_get_ host info($link): 
mysql_close(S$link): 
Ys 


以 上 代码 连接 到 本 地 机 器 的 MySQL 数据 库 ， 如 果 连 接 成 功 ， 则 显示 如 图 13-17 所 示 
的 信息 。 


文件 四 ”多 科 Q) 查看 尿 遍 工 贞 人 0 
四 碍 -加 -四 国名 Par Wr @ 全 -局 回 -OO 外 
二 业 D) 秽 tp /IT.0.0_ Usite/shuivpig _ _» 加 二 | Om 四 


直接 成 功 ， 服 务 器 信息 ，127 0.0.1 via TCPAP 


图 13-17 连接 成 功 


连接 数据 库 的 函数 有 两 个 :一 个 是 mysql_sql_get_host_info($link) 函 数 ， 用 于 获取 服务 
器 信息 ; 一 个 是 mysql_close($link) 函 数 ， 用 于 关闭 一 个 活跃 的 数据 库 连接 。 


了 魔法 档案 

在 连接 数据 库 的 过 程 中 需要 注意 的 是 ， 当 完成 数据 库 的 操作 时 ， 都 需要 使 用 一 个 函数 关 

闭 数据 库 .PHP 手 册 里 提供 了 一 个 bool mysql_ close ([ resource $link identifier ] ), 其 中 的 mysql close0 

即 是 用 于 关闭 指定 的 连接 标识 所 关联 的 到 MySQL 服务 器 的 非 持久 连接 。 如 果 没 有 指定 

link identifier， 则 关闭 上 一 个 打开 的 连接 。 通常 不 需要 使 用 mysql close0， 因 为 已 打开 的 非 持久 连接 
会 在 脚本 执行 完毕 后 自动 关闭 。 上面 的 倒数 第 二 行 代码 就 是 这 个 函数 的 应 用 。 
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13.3.2 ”选择 数据 库 


前 面 已 经 成 功 连接 了 数据 库 服务 器 ， 但 是 一 个 数据 库 服务 器 可 能 包含 了 很 多 的 数据 
库 ， 通 常 需要 针对 某 个 具体 的 数据 库 进 行 编 程 ， 此 时 就 必须 对 数据 库 进行 选择 。 

选择 某 个 数据 库 可 以 通过 PHP 手册 进行 ， 如 下 面 这 个 函数 。 

bool mysql select db ( string $database name [, resource $ link identifier ] ) 

如 果 成 功 则 返回 True， 失 败 则 返回 False。 

下 面 选择 前 面 所 建 的 数据 库 susan， 如 果 选 择 成 功 ， 则 输出 “成 功 连接 susan”， 如 果 
选择 失败 ， 则 输出 “数据 库 选择 失败 ”。 输 入 如 下 代码 ; 


<?php 
Slink = mysql_connect('127.0.0.1', root', '1234"); 
1f (mysql select_db('susan',$link)) 
echo "成 功 选择 数据 库 susan"; 

else 

echo ("数据 库 选 择 失败 :'.mysql_error()); 
mysql_close($link); 
?> 


执行 结果 如 图 13-18 所 示 。 
EAAAN ph - Eicrosoft Inte 
文件 四 ” 编 弹 加 查看 GO 疏 厌 他 工具 村 肪 到 
< 昌国 国 的 让 要 站 tax 回合 - 束 加 - 口 避 入 
ED) 乓 htty /127 0 0 Vnyestol eye php ww We 各 aaat 加 
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图 13-18 选择 数据 库 


13.3.3 创建 查询 


数据 库 中 的 信息 十 分 繁琐 ， 因 此 在 数据 库 编程 的 过 程 中 查询 是 十 分 重要 的 。 用 户 可 以 
通过 函数 手册 找到 用 于 查询 的 函数 mysql_query。 该 函数 的 声明 如 下 : 


resource mysq] query ( string $query [, resource $link identifier ] ) 


mysql_query0 仅 对 SELECT, SHOW, EXPLAIN 或 DESCRIBE 语句 返回 一 个 资源 标 
识 符 ， 如 果 查 询 执行 不 正确 则 返回 False。 对 于 其 他 类 型 的 SQL 语句 ，mysql_query0 在 执 
行 成 功 时 返回 True， 出 错时 返回 False。 非 False 的 返回 值 意味 着 查询 是 合法 的 并 能 够 被 服 
务 器 执行 ， 但 这 并 不 说 明 任何 有 关 影 响 到 的 或 返回 的 行 数 ， 很 有 可 能 一 条 查询 执行 成 功 了 


并 ，， 
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但 并 未 影响 到 或 并 未 返回 任何 行 。 
13.3.4 ”插入 新 数据 


向 数据 库 插入 数据 ， 首 先 要 连接 数据 库 ， 再 选择 数据 库 ， 然 后 再 选择 表 ， 再 插入 记录 。 
下 面 将 通过 代码 讲解 如 何 向 数据 库 中 插入 数据 。 在 第 12 章 中 曾 讲 过 表单 ,表单 是 数据 库 与 


图 13-19 创建 表单 


创建 表单 后 ， 创 建 susan 数据 库 ， 然 后 创建 一 张 表 ， 字 段 名 与 变量 之 间 要 对 应 。 输 入 
如 下 代码 即 可 完成 数据 的 插入 : 


<?php 
$id=mysql_connect("127.0.0.1","root","1234") or die(' 连 接 失 败 :'. mysql]_error0); 
if(mysql_ select_db("susan",$1d)) 
echo ™; 
else 
echo ("数据 库 选择 失败 :'. mysql_error0): 
mysql_query("set names gb2312"): 
if($Submit==" 提 交 "){ 
$query=mysql_query("insert into tb_insert (name,number,tel,address)values('$name', 
$number','$tel','$address")"):} 
if($query—true){ 
echo "数据 添加 成 功 11"; 
} 
else{echo "数据 插入 失败 11";}; 
?> 
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这 麻 法 档案 
数据 的 插入 在 动态 网 页 中 大 多 使 用 表单 ,在 论坛 中 可 以 实现 发 布 帖子 的 功能 , 在 校园 网 中 
可 以 实现 添加 学 生 个 人 信息 的 功能 


13.3.5 ”删除 数据 


在 数据 库 的 应 用 中 ， 数 据 的 删除 操作 也 是 一 项 比较 重要 的 技术 。 
删除 数据 主要 应 用 的 是 SQL 语言 中 的 delete 语句 ， 可 以 通过 where 指定 查询 条 件 ， 这 
样 就 可 以 实现 指定 记录 的 删除 。delete 语句 的 语法 如 下 : 


delete from table_ name 
where condition 


删除 table_name 表 中 的 记录 时 ， 如 果 没 指定 where 条 件 ， 将 删除 该 表 中 的 所 有 记录 ; 
如 果 指 定 了 where 条 件 ， 将 按照 指定 的 条 件 进行 删除 。 
如 下 面 的 代码 将 删除 本 机 上 数据 库 的 记录 : 


<?php 

$id=mysql_connect("localhost","root","root")or dir(' 连 接 服 务 器 失败 :'. mysq]_error()); 
if(mysql_select_db("susan",$1d)){ 

echo ""; 

}else {echo (连接 数据 库 失败 :'. mysql_errorO):} 

mysql_ query("set names gb2312"): 


if($Submit==true){ 
$query=mysql query("delete from tb_insert where 1d='$lmbs"); 
if($query——true){ 
echo "<script>alert(' 删 除 成 功 !1"); window.location.href='index.php';</script>"; 
}else{ 

echo "<script>alert(' 删 除 失败 11"); window.location.href='index.php';</script>"; } 
} 
?> 


数据 库 中 的 删除 功能 是 供 浏览 者 删除 数据 的 ， 所 以 设计 者 必须 编写 一 个 页 面 ， 让 浏览 
时 到 者 操作 。 例 如 ， 在 此 编写 一 个 表单 来 读 取 数 据 库 ， 代 码 如 下 。 


<?php $query=mysql_query("select * from tb_insert where ld limit 3"); 


if($query—true){ 
while($myrow=mysql fetch array($query)){ 
> 
<form name="form!]" method="post" action="index1 .php?lmbs=<?php echo $myrow[id]:?>"> 
SA er 
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<tr> 
<td height="25" align="center"><span class> 
<?php echo $myrow[name]:?></span></td> 
<td align="center"><span> 
<?php echo $myrow[number]:?></span></td> 
<td align="center"><span class="STYLE2"> 
<?php echo $myrow[tel];?></span></td> 
<td align="center"> 
<span > 
<?php echo $myrow[address];?></span></td> 
<td align="center"><span> 
<input type="submit" name="Submit" value=" 删 除 "> 
</span></td> 
</tr> 
</form> 
<2php }}7> 


"| : 麻 法 档案 

对 于 数据 库 的 操作 ， 一 个 网 页 往往 是 不 够 的 ， 它 需要 多 个 网 页 的 合作 ， 例 如 上 面 所 讲 的 读 
取 数 据 库 需要 一 个 页 面 ， 处 理 数据 库 也 需要 一 个 页 面 。 在 大 的 网 站 中 ， 很 多 人 习惯 把 链接 数据 写 在 一 
个 单独 的 网 页 中 ， 如 写成 一 个 单独 的 conn.php， 哪 个 网 页 需要 ， 只 需 include(" 路 径 conn.php") 即 可 。 


13.4 SQL 语句 的 应 用 


在 操作 数据 库 的 过 程 中 ，PHP 函数 不 能 完全 胜任 ， 此 时 便 需 借助 数据 库 自身 提供 的 语 
言 一 一 SQL 语句 。 例 如 ，13.3.5 小 节 中 删除 数据 库 中 的 数据 这 一 重要 的 操作 中 PHP 手册 并 
没有 提供 这 样 的 函数 , 但 是 它 通过 SQL 语句 和 条 件 语 句 顺利 地 实现 了 删除 操作 。 下 面 详细 
讲解 几 种 常用 的 SQL 语句 ， 以 方便 初学 者 更 好 地 操作 数据 库 。 


13.4.1 创建 表 的 SQL 语句 


关系 数据 库 的 主要 特点 之 一 就 是 用 表 的 方式 组 织 数据 。 表 是 SQL 语言 存放 数据 、 查 找 
数据 以 及 更 新 数据 的 基本 数据 结构 。 在 SQL 语言 中 , 表 有 着 严格 的 定义 。 它 是 一 种 二 维 表 ， 


对 于 这 种 表 规 定 如 下 。 
党 每 一 张 表 都 有 一 个 名 字 ， 通 常 称 为 表 名 或 关系 名 。 表 名 必须 以 字母 开头 ， 最 大 长 
度 为 30 个 字符 。 


党 ”一 张 表 可 以 由 若干 列 组 成 ， 列 名 唯一 ， 列 名 也 称 为 属性 名 。 
党 ” 表 中 的 一 行 称 为 一 个 元 组 ， 相 当 于 一 条 记录 。 


We 着 
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党 ”同一 列 的 数据 必须 具有 相同 的 数据 类 型 。 

党 表 中 的 每 一 个 列 值 必 须 是 不 可 分 割 的 基本 数据 项 。 
创建 表 的 SQL 语句 ， 其 语法 如 下 : 

CREATE TABLE 表 名 [ 表 约 束 ] 

( 列 名 1 数据 类 型 [默认 值 1, 列 约束 1] 

列 名 2 数据 类 型 [默认 值 2, 列 约束 2] 


列 名 n 数据 类 型 [默认 值 n, 列 约束 nn]) 


13.4.2 ”插入 数据 的 SQL 语句 
新 建 一 张 表 后 ， 通 过 向 表 中 插入 数据 ， 便 可 使 数据 库 中 的 内 容 越 来 越 庞 大 ， 相 应 地 网 
站 的 内 容 也 就 越 来 越 丰富 。 插 入 数据 可 通过 SQL 语句 来 实现 ， 其 语法 如 下 。 


INSERT INTO 表 名 [( 列 名 1,...】] 
VALUES( 值 1， 值 2，.…, 值 加 


13.4.3 ”修改 数据 的 SQL 语句 


在 制作 网 站 时 ， 经 常 需要 修改 数据 库 中 的 内 容 。 例 如 ， 在 创建 博客 的 过 程 中 ， 当 用 户 
发 现 自己 的 日 志 有 许多 文字 输入 错误 ， 即 可 对 其 进行 修改 。 想 要 修改 数据 库 中 的 数据 ， 可 
以 通过 SQL 语句 来 实现 。 其 语法 如 下 : 

UPDATE 表 名 SET 列 名 1= 表达 式 1, 列 名 2= 表 达 式 2,.… 

WHERE 条 件 ; 

例如 B 在 填写 个 人 资料 时 ， 将 自己 的 年 龄 输入 错误 ， 其 改写 的 方法 如 下 : 

UPDATE STUDENT SET AGE=18 WHERE NAME=B'; 


13.4.4 ”删除 数据 的 SQL 语句 


删除 数据 很 好 理解 ， 就 是 将 不 需要 的 数据 删除 。 这 一 操作 只 针对 已 有 的 数据 ， 对 于 不 
存在 的 数据 ， 它 是 不 能 操作 的 。 删 除数 据 可 通过 SQL 语句 来 实现 ， 其 语法 如 下 。 


DELETE FROM 表 名 WHERE 条 件 ; 
例如 ， 删 除 student 表 中 年 龄 为 12 的 学 生 的 数据 ， 代 码 如 下 。 
DELETE FROM STUDENT WHERE AGE=12; 


y 
”魔法 档案 
| 任何 数据 库 的 SQL 语句 都 相同 ， 都 是 同一 个 标准 。 
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13.5 典型 实例 一 一 连接 并 选择 数据 库 


本 章 主 要 讲解 了 数据 库 和 编程 的 相关 知识 ， 下 面 便 综合 运用 这 些 知识 创建 一 个 名 为 
“tangchao” 的 数据 库 ， 然 后 连接 并 选择 数据 库 。 具 体操 作 如 下 : 

步 驿 1] 打开 下 浏览 器 ， 在 地 址 栏 中 输入 网 址 “http:/127.0.0.1/phpmyadmin/”; 在 打 

开 的 页 面 中 输入 用 户 名 和 密码 ， 进 入 到 数据 库 的 管理 页 ; 在 “创建 一 个 新 的 

数据 库 ” 文 本 框 中 输入 “taochao”， 然 后 单 击 [@ 到 按钮 ， 如 图 13-20 所 示 。 


要 127-0.0.1 / localhozt | phpayhdain 2.11.6 - 了 icrozsft_Jnternet Explorer 
文件 四 ”编辑 下 ) 查看 W) 路 豪 信 工具 中 。 帮 有 动 0 
四 碍 -加 - 国 国 曲 刀 且 交 wm 加 区- 痘 习 -品级 
地 址 四) 图 http://127_0.0.1/phonysdni/index php71 ng:h-ey23128t cen-623004821bbef<32s3T6c5ff2as2ebiayhyllyA 二 | 区] 转 到 访 接 约 snselt 加 
phpMyAdmin 加 服务 器 版 本 : 5.0.51b-communityntlog 。 ， MySOQL 客户 涡 版 本 : 50.51b 本 
， 协议 版 本 : 10 > 使 用 FHP 扩展: mysql 
加 | 国 | 国 | 国 | 加 ， 服务 器 localhostyva TCPIP 后 语言 -Language 国 
i » 用户 roct@ocalhost 甲 文 - Chinese simpliied 
«informaton_schema 
(DD 回 MySQL 字符 集 : UTF.8 Unicode (utf8) 。 情 主 题 / 风格 :|Original 


ic 
MP VyAdmMin Wk 


td 全 prpWyAdmin 官方 网 站 
» [ChangeL og] [Suoyersion] ILists] 
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步骤 2 在 数据 库 tangchao 中 新 建 一 张 名 为 shige、 字 段 数 为 3 的 表 ( 即 在 “名 字 ” 文 
本 框 中 输入 “shige”， 在 “字段 数 ” 文 本 框 中 输入 “3” ) ， 单 击 国 司 按钮 ， 
如 图 13-21 所 示 。 


立 伴 人 0 六 蝇 查 硅 吕 收 康 人 工具 们 大 各 加 

Om- 眉 - 国 国 验 万 mm 页“ 加 加 -党 .OR 

地 作品 | 莘 hty win 0.0 1fohym alain imines Vie wei eri tkeoren000 EI TT Te TS eh me 
医 结 构 “ 亚 SQL 万 搜索 号 可 询 鱼 导 出 部 叶 入 色 操 作 暇 权限 哆 制 除 


加 


国 数据 库 taochao 己 经 建立 . 


三 SQL 查询 : 
CREATE DATABASE Yochao 


口 Profing [编辑 11 摊 PHP 代 得 ] 
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图 13-21 创建 表 
步 又 3 在 打开 的 页 面 中 对 字段 进行 相应 设置 ， 然 后 单 击 医 醒 按钮， 如 图 13-22 所 示 。 
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图 13-22 设置 字段 
步骤 4 启动 Dreamweaver CS3， 创建 一 个 网 页 ， 并 在 其 中 输入 如 下 代码 。 


<2php 
S$link = mysql connect(127.0.0.1, root', '1234"); 
if (mysql_select_db('taochao',$link)) 
echo "成 功 选 择 数 据 库 taochao"; 
else 
echo ("数据 库 选 择 失败 :'.mysql_error()); 
?> 


步骤 5 输入 完毕 后 ,将 其 保存 为 conn.php， 运 行 结果 如 图 13-23 所 示 (光盘 :\ 最 终 效 
果 \ 第 13 章 \conn.php ) 。 


En 
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上 
这 魔法 档案 
| 选择 数据 库 后 ， 可 以 对 数据 库 进 行 添加 数据 、 删 除数 据 和 修改 数据 等 操作 。 如 当前 数据 库 


中 没有 数据 则 不 能 实现 删除 和 修改 操作 。 


时 
| 第 13 章 神秘 的 数据 库 (MySQL) 着 法 忆 


a 
13.6 常见 问题 解答 


A. 魔法 师 ， 现 在 我 明白 了 PHP 是 一 种 优秀 的 动态 交互 语言 ， 用 它 可 以 让 网 站 的 交互 
功能 更 为 强大 ， 但 是 不 是 PHP 就 只 能 与 MySQL 搭配 才能 实现 强大 的 功能 ? 


人 hh: 不 是 的 ，PHP 可 以 和 目前 比较 流行 的 大 多 数 数据 库 软件 合作 ， 如 Access、MYSQL、 
DB2 等 。 这 些 数据 库 在 功能 上 都 大 致 相同 ， 使 用 方法 也 基本 类 似 ， 但 是 针对 的 对 象 
有 所 不 同 。 例 如 ，Access 是 桌面 数据 库 ， 在 网 站 开发 的 过 程 中 它 的 安全 性 并 不 是 很 
高 ， 在 网 络 中 其 表现 自然 没有 网 络 数据 库 那么 优秀 ; MYSQL 就 是 Microsoft 公司 的 
SQL Server 数据 库 ， 它 虽然 是 网 络 数据 库 ， 但 是 更 适用 于 大 中 型 网 络 ，DB2 也 是 网 
络 数据 库 , 是 由 Sun 公司 开发 的 , 这 个 数据 库 安装 时 比较 麻烦 , 不 适合 初学 者 。PHP 
与 MySQL 配合 得 十 分 优秀 ， 所 以 本 章 详 细 讲解 如 何 操作 MySQL; 其 安装 也 比较 简 
单 ， 第 2 章 曾 提 到 ， 只 要 安装 了 PHPnow， 就 安装 好 了 MySQL。 


和合: 应 法 是 ，MySQL 未 身 没有 可 视 化 编辑 数据 库 ， 但 可 借助 第 三 方 软件 操 伯 数据库 ， 
我 想 问 ， 哪 一 种 工具 操作 数据 库 比较 好 ? 


2: 对 于 初学 者 来 讲 ， 任 何 一 个 数据 库 工具 都 能 满足 需要 ， 既 可 以 用 数据 库 
phpMyAdmin， 也 可 用 Navicat， 都 不 影响 MySQL 的 性 能 。 不 过 phpMyAdmin 更 适 
于 初学 者 ， 因 为 这 个 工具 是 用 PHP 代码 开发 的 ， 可 以 很 好 地 操作 MySQL， 且 操作 
很 简单 ， 而 Navicat 则 适合 习惯 了 窗口 程序 的 用 户 。 


: 魔法 师 ， 是 不 是 在 操作 数据 库 时 ， 第 一 步 要 做 的 是 连接 数据 库 ? 


: 小 魔女 ， 你 对 于 数据 库 终 于 有 所 领悟 了 。 是 的 ， 要 操作 数据 库 ， 首 先 要 连接 数据 库 ， 
选择 需要 编辑 的 数据 库 ， 然 后 再 编辑 数据 库 。 


Pa 扫 


人 A. 魔法 师 ，SQL 语句 是 一 门 复杂 的 数据 库 语 言 ， 我 查 了 一 下 资料 ，SQL 语句 除了 13.4 
节 所 讲 的 还 有 很 多 ， 怎 样 才能 学 好 它 呢 ? 


£ 是 的 ，SQL 语句 非常 复杂 ， 在 此 主要 是 针对 初学 者 ， 所 以 只 选择 性 地 介绍 了 几 个 常 
用 的 SQL 语句 。 如 果 想 深入 地 学 习 SQL 语句 ， 就 必须 找到 相关 资料 ， 全 面 地 学 习 。 


成 | 


As 法 \ 
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13.7 过 关 练 习 


(1) 启动 bbpMyAdmin， 输 入 用 户 名 和 密码 ， 进 入 其 首页 ， 建 立 一 个 名 为 songci 的 
数据 库 ， 再 新 建 一 个 名 为 songci 的 表 ， 其 中 有 3 个 字段 ， 即 ciname、name、ci， 如 图 13-24 
所 示 。 


图 服务 器; localhost ， 操 数 惨 库 : songci ， 日 胡 : songei 

FR rore ia 

cr 本 VARCHAR 。 恬 
司 长 度 慎 4 0 2 


| 


图 13-24 设置 字段 
(2) 启动 Dreamweaver CS3， 编 写 一 段 连接 数据 库 songci 的 程序 ， 再 选择 songci 数 
据 库 ， 如 果 选 择 成 功 则 输出 提示 语 “ 成 功 选择 ”， 如 果 连 接 失败 则 显示 “选择 失败 ”。 
提示 : 用 户 只 需要 在 网 页 中 输入 下 面 的 语句 即 可 。 


<?php 
$link = mysql_connect('127.0.0.1', root', "1234"); 
1f (mysql select_db('susan',$link)) 
echo "成 功 选 择 "; 

else 

echo ("选择 失败 :' mysql]_error()): 
mysql_close($link): 
> 


一 学 玖 会 民 法 书简 


制作 一 个 简单 的 相册 网 站 


实例 目标 
制作 分 析 
制作 过 程 


初学 者 如 何 使 用 相册 源码 
a 


魔法 师 : 
小 魔女 : 


魔法 师 : 


小 魔女 : 


魔法 师 : 
小 魔女 : 


网 1 多 媒体 教学 演示 : 25 分 名 


小 魔女 ， 你 在 做 什么 呢 ? 

哦 ， 我 在 整理 我 最 近 拍 的 照片 ， 
拍 了 好 多 。 

嗯 ， 这 些 照片 拍 得 真 不 错 ， 为 
什么 不 做 一 个 网 站 ,将 照片 上 
传 到 网 站 上 ， 供 好 朋友 分 
享 呢 ? 

我 也 想 呀 ， 可 是 我 真 的 不 会 ， 
虽然 前 面 学 了 那么 多 网 站 的 知 
识 。 可 是 我 自己 做 , 仍 感 觉 
5 

没关系 ， 我 教 你 做 。 

真 的 ? 那 太 好 了 。 


禹 法 


要 站 蕊 新 手 学 做 网 站 


14.1 实例 目标 


本 实例 主要 是 应 用 前 面 所 学 的 知识 ， 独 立 制作 出 一 个 十 分 精美 的 相册 网 站 。 网 站 首页 
如 图 14-1 所 示 。 


图 14-1 相册 首页 
数据 库 是 一 个 动态 网 站 的 核心 ， 它 保存 着 整个 网 站 的 重要 信息 ， 这 个 网 站 的 数据 库 是 
如 何 设计 的 呢 ? 建立 了 一 个 有 4 张 表 的 数据 库 ， 这 个 数据 库 为 “photo”， 如 图 14-2 所 示 。 


Om se Oa 加 
类 型 校对 


py_attachment 到 加 5S MHSAM gbk_chinese ci 
Py-comment 至 可 3 MHSAM gbk_chinese dl 


photo (3) 
pysetings 。 至 机 22 MSAM gbkchinese_ci 


pyatlachmont 
py-comment 


py_sort 到 而 2 MHSAM gbk_chinese_oi 
posettngs 
sont 4 个 表 MyISAM latin1_swedish_ci 


图 tet 


[| 图 14-2 “photo” 数 据 库 表 结 构 


14.2 制作 分 析 


网 站 通常 是 由 前 台 和 后 台 构成 ， 前 台 供 浏览 者 浏览 观看 效果 ， 而 后 台 是 管理 整个 网 站 


EE We 


ma/ 
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垃 


内 容 的 页 面 ， 通 常 只 有 管理 者 才能 进入 ， 它 需要 一 定 的 权限 。 前 台 与 后 台 的 工作 都 离 不 开 
数据 库 ， 因 为 数据 库 保存 着 重要 的 信息 ， 通 常 前 台 的 工作 是 从 数据 库 获取 数据 ， 而 后 台 通 
常 是 将 数据 写 入 数据 库 。 但 区 分 不 绝对 ， 如 访问 者 留言 ， 这 是 位 于 前 台 ， 它 是 将 数据 写 入 
数据 库 。 因 此 ， 制 作 这 个 网 站 的 第 一 步 是 用 户 建立 好 数据 库 ， 然 后 制作 后 台 ， 再 制作 前 台 


的 页 面 最 终 完成 整个 网 站 的 制作 。 


14.3 操作 过 程 


在 制作 网 站 前 , 用 户 一 定 要 搭建 一 个 适合 PHP 和 MySQL 的 运行 平台 。 搭建 完 平 台 后 ， 


汪 


目 户 就 可 以 动手 制作 整个 网 站 了 。 
14.3.1 建立 一 个 数据 库 


启动 PHPMyAdmin 就 可 以 创建 数据 库 了 ， 具 体操 作 如 下 : 


步 桑 1 启动 PHPMyAdmin, 输入 用 户 名 和 密码 登录 系统 , 在 “创建 一 个 新 的 数据 库 ” 
文本 框 中 输入 “photo”， 单 击 [@ 开 按钮， 如 图 14-3 所 示 。 


文件 虽 。 岗 查 下 查看 
二- 团 四 


图 htu Jizr on hpwywariainaocpigralpiotettnimnr63in5awLclcelrbcn09543Tte 


Sm a @seet 加 


phpMyAdmiIn 
全 图 回国 | 


，iniormaton_schema 
(7) 


» mysol (17) 
» test(0) 


vote 人 


请 选择 数据 库 


步骤 2 在 “数据 库 photo 中 创建 一 个 新 栏目 ”中 输入 表 名 和 字段 数 ， 在 “ 表 名 ” 文 
本 框 中 输入 “py_attachment”， 在 “字段 数 ”文本 框 中 输入 “6”， 单 击 葬 条 ] 


按钮 。 


此 营 3 在 打开 的 页 面 中 设置 字段 ， 设 置 完成 后 ， 单 击 匡 硬 ] 按 钮 ， 如 图 14-4 所 示 。 


localhost phpMyAdmin - 2.11.6 


”MySQL 客户 谭 版 本 5051b 
， 使 用 PHP 扩展 mysq 


加 服务 咒 版 本 50 51b community ntlag 
协议 版 本 10 


* 服务 器 locahostwe TCPHP 他 语言 -Lenouage 加 
se 


上 用户 ;root@lacahost 中 文 -CI 
辆 MSOL 字符 集 UTF Unicode (utfe) 


@ 
记 创 建 一 个 新 的 数据 库 加 
[Ez 加 


利于 示 MYSOL 的 运行 信息 
国 显示 MySQL 的 系统 变量 名 


图 14-3 建立 数据 库 


ongna 
加 WSQL 产 接 校对 Uf8_uricode_ ， 字体 大 小 [1102 页 

上 phoMyAdmin 文 档 

， phpMyadminwk 

po 和 人 phoMyAdmin 官方 网 站 

* [CnangeLogl ISubversion| [Liste] 


LN 
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msl 


字段 类 型 校对 属性 ”Null 靳 认 莉 外 操作 
attid 1g) sae 否 asoincrement 国 户 X 因 加 罗 后 
sid mg) See 下 本 | 天 网 | 男 | 四 | 三 | 硬 
url varchar(255) gbk_chinese_ci 否 图 AX 国 曙 虹 品 
ext char(4) gbk_chinesa_ci 否 po 围 必 XXX 加 劝 曙 品 
introduce mediumtext 。 gbk_chinese_ci 否 国 AX 蜀 又 
attdate chart15) gbk_chinese ci 否 国产 X 恒 四 肥 占 


14-4 “py_attachment” 表 结构 


步骤 4 用 相同 的 方法 创建 3 张 表 , 即 “py_comment”、 “py_settings” 和 “py_sort”， 


依次 为 它们 添加 字段 ， 它 们 的 表 结 构 分 别 如 图 14-5 所 示 。 


肯 服务 器 : localhost ， 轧 数据库 : photo， 男 表 : py_comment 
加 浏览 。 攻 结构 及 saL 万 搜索 新 入 吐 叶 出 镁 导入 、 问 操作 便 清 空 加 制 除 


字段 类 型 校对 属性 ”Null 鞭 认 额外 操作 
口 comd inl10) usowp 否 aum_incemen 加 多 X 图 加 可 器 
Og Ito) usoe 本 万 XX 国 回 加 全 
口 usemame varchar(30) gbk_chnese_ci 否 x 曼 贺 
Ou varchar(255) gbk_chinese_ci 否 国 交 X 加 四 罗网 
口 content medumtaxt gbk_chnase_cl 否 国 A x 四 坚 加 
口 comdate inti10) wsoe 否 图 尹 X 图 四 加 语 
口 checked bmymt1) 百 0 则 攻 XX 出 网 加 司 


盟 服务 器 :localhost 加 数据 库 : photo ， 四 表 : py_settings 
国 浏 览 。 攻 结构 _ 丙 SQL 万 搜索 许 插 入 三 导出 _ 何 导 入 钦 操 作 别 清 空 另 删 除 


14.3.2 


后 台 是 


字段 类 型 校对 属性 Null 默认 额外 操作 
ail.. le varchar(32) gbk_chinese_ci 否 加 X 图 加 
口 value ”medumtext gbk_chinese_ci 否 各 疡 X 国 站 四 
园 服务 器 :localhost ， 电 数据 库 : photo ， 园 表 : py_sort 
属 浏览 本 结构 “加 SQL 大 搜索 和 插入 、 旱 导出 曾 导 入 多 操 作 陆 消 容器 制 除 

字段 类 型 校对 属性 Null 起 认 荐 外 操作 
口 sortid imtt10) uspieo 否 auto incoremert 图 A X 国 加 器 避 
口 te varchar(50) gbk_chinese_di 要 图 必 X 国 四 可 
口 description medumied 。 gbk_chinese_ci 否 上 风 X 图 四 国 
DD postdate int(10) ws 覃 国 闻 X 图 而 易 酉 
口 latest int(10) en 用 国 X 国 四 玉 宁 
hkts mediumintle) Upneo 否 图 闷 X 国 四 加 可 
口 displayorder inttlo) epep 否 1 六 X 加 四 加 本 
DD parentid 。 init 人) 否 -1 现 风 辑 四 男 | 夯 
口 “parentfiet varchar(255) gbk_chinese oi 否 转 玫 X 国 加 国 


14-5 3 张 表 的 结构 


后 台 管理 的 建设 
管理 人 员 才 能 看 到 的 页 面 ， 有 一 定 的 保密 性 ， 对 整个 网 站 有 一 定 的 控制 ， 对 设 


计 者 的 要 求 也 较 高 ， 具 体操 作 如 下 : 


步骤 1 


启动 Dreamweaver CS3， 在 “mysite” 站 点 下 建立 一 个 “admin” 文 件 夹 ， 用 
这 个 文件 夹 存 放 后 台 文 件 。 


法 村 
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步 又 2 ”新建 一 个 框架 网 页 “admincp.php”， 它 的 子 框架 页 面 分 别 是 “admincp.php? 
action=header” 、“admincp.php?action=menu” 和 “admincp.php?action=main”。 
这 是 登录 成 功 进入 的 页 面 ， 用 户 打开 “admincp.txt” (光盘 :\ 素 材 \' 第 14 章 \ 
admincp.txt ) ， 将 其 中 的 代码 复制 到 “admincp.php” 中 即 可 ， 如 图 14-6 所 示 。 

号 新建 一 个 “functionsphp” 页 面 ， 这 个 页 面 主要 是 处 理 一 些 网 页 的 基本 信息 ， 
这 里 将 处 理 “ 文 件 上 传 ”、“ 获 取 指定 目录 和 子 目 录 中 的 文件 ”、“ 获 得 文 
件 扩展 名 ”、“ 删 除 目录 ”等 功能 ， 打 开 “functions.txt” (光盘 :\ 素 材 \ 第 14 
章 \functions.txt ) ， 将 其 复制 到 页 面 中 ， 如 图 14-7 所 示 。 


原 hdobe Dreanweaver C53 — [,..ocs\aysite\adain\adeincp.-. be Diorevpever C3 — pit pnin Veretie. 
文 件 吕 六】 查看 Q) 插入 记录 做 0) 文本 命令 站 点 G) 二 站 四 人 
帮助 吉 

THER 训 用 ”布局 | 和 FF | 由 所 yy | 文 相 | 届 闪 

息 回 昌 | 图 回国 .自问 甬 因 占 - 仿 -| 四- 好 


vA、 有 局 表单 | PP | 天 所 | Spry | 女 | 中 六 区 
入口 吕 | 轩 回国 -安国 罚 因 四- 坊 -| 因 -加 


adninep. pap 一 四 | 
EUJEEOELE 是 


php 
2 requre_once /glooalphp 


如 
车 | 夺 


umeriam upfilel$source, 


i (funet 
re ce jidian.’,/adnir/functions. php’ ; oacet rareat)) { 


汪 陆 从 reer 
pnitchack (islogin’) = "yes’ Mk enpty($adnin_inEo)) { py (ecuroe, Btarget)) 4 
Sadnin_name = addzlazhes(trln(gadnin_nane)] ; 
Sadnin-pasevord = trin($adnin password) ; 


它 老 | 财 叶 疆 | 
EYEE 


3f (enpty($adnin_nane) || enpty(Sadnin passvord)) | 
pheader 0. 
1 cpnss( 用 户 名 或 客 码 为 补 !“) 


i [#| 


rareet, "wb 
Sadnin passvord = mdf ($adnin_ passvord); Wn 
af ($adnin_nano 1=” $pkpyeu_adnin_nane || adnin_paczvord 
1= S$phoyou adnin passvord) { 
cpheader() 
ee 用 记名 型 友 性! 请 条 输入 ); 


er) 
tare st, DEG6); 
areet 


ET EIE 


ET 


B23 
超 式 无 着 和 | 无 间 Ces az 
Err | 梧 D[ 


图 14-6 后 台 首页 图 14-7 后 台 处 理 页 


~ SS 
小 魔女 , 这 两 个 页 面 的 功能 十 
~ “ 
分 强大 ,代码 也 较 多 , 第 一 个 CE ~ 
页 面 主要 是 用 来 全 录 , 第 一 个 i 本 
主要 是 处 理 上 传 图 片 的 一 些 oa 


功能 ， 一 定 要 全 细 阅 污 鸣 。 
> i 
步骤 4 登录 后 台 后 ， 左 边 是 一 个 导航 ， 用 户 可 新 建 一 个 名 为 “menu.php” 的 网 页 文 


件 ， 并 通过 CSS 样式 对 其 进行 美化 ， 制 作出 如 图 14-8 所 示 的 效果 。 
步骤 5 ”制作 完成 后 ， 在 第 一 行 输入 如 下 代码 : 


机 


不 
Y 新 手 学 做 网 站 
<2php 
这 !defined( 相 册 )) { 
exit('Access Denied); 
} 
?> 
步骤 6 新 建 一 个 名 为 “main.php” 的 网 页 ， 用 于 显示 服务 器 平台 信息 ， 在 进入 后 台 


NR 


的 首页 后 ， 将 记事 本 “main.txt” (光盘 :\ 素 材 \ 第 14 章 \ main txt ) 中 的 代码 复 
制 到 这 个 网 页 中 ， 单 击 “ 设 计 ” 按 钮 国 说 t 进 入 设计 视图 ， 可 观察 如 图 14-9 
所 示 的 效果 。 


3 dm 加 
所 本 IT 二 paszry pT pr re [ET 


机 博古 | 和 | 精 q 7 


二 加 六 | 园 回 国 - 有- 辐 因 四 吕 - 护 -| 目 - 局 Ee 和 本 


次 吕 点 | 且 电 国 -家 - 辐 则 晶 - 护 -| 旧名 


图 14-8 后 台 首 页 导航 页 图 14-9 中 心 页 
后 台 首 页 的 顶部 页 面 十 分 简单 ， 只 需要 输入 后 台 管理 ,通过 CSS 样式 将 其 设 
置 为 蓝 色 即 可 。 
新 建 页 面 “addone.php”， 打 开 “addone.txt” 将 其 中 的 代码 复制 到 页 面 中 ， 
当 系统 完成 后 ， 显 示 效果 如 图 14-10 所 示 。 


ma/ 


第 14 章 制作 一 个 简单 的 相册 网 站 
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步 又 9 ”在 上 传 的 过 程 中 , 用 户 必须 对 图 片 格式 进行 判断 , 新 建 页 面 “sortthumb.php”， 
打开 记事 本 “sortthumb txt” ( 光 人 盘 :\ 素 材 \ 第 14 章 \ sortthumb.txt ) ， 将 代码 复 


步 又 10 在 上 传 的 过 程 中 ， 还 需 分 类 ， 分 类 是 通过 新 建 “sortselectphp” 页 面 来 完成 
的 ， 将 记事 本 “sortselect.txt” (光盘 :\ 素 材 \ 第 14 章 \ sortselecttxt ) 的 代码 复 


制 到 页 面 中 ， 如 图 14-11 所 示 。 


制 到 页 面 中 ， 如 图 14-12 所 示 。 


图 14-11 新 建 页 面 “sortthumb.php” 


步 又 11 当 图 片上 传 到 网 站 后 ， 还 需要 进行 修改 等 编辑 操作 ， 新 建 页面 “editphp”， 
打开 “edit.txt” ( 光 人 盘 :\ 素 材 \ 第 14 章 \ edit.txt ) ,将 代码 复制 到 页 面 中 ， 若 制 
作 完 成 后 ， 在 后 台 将 以 这 样 的 效果 出 现 ， 如 图 14-13 所 示 。 


ET EY TEI I] 


14-12 新 建 页 面 “sortselect. Php” 


ES 


四 


法 
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步 又 12 新 建 页 面 “editmultiphp”， 打 开 记事 本 “editmultitxt” (光盘 :\ 素 材 \ 第 14 
章 \editmultitxt) ， 将 代码 复制 到 页 面 中 ， 如 图 14-14 所 示 。 
步骤 13 新 建 页 面 “editone php”， 打 开 记事 本 “editone.txt” ( 光 兽 :\ 素 材 \ 第 14 章 \ 


rR A mh Rm Ro ER TH Rm 2 和 
可 总 | 因 卓 国 - 直 - 轩 驴 昌 总 ,所 -| 中 .有 四 昌 回 - 和 -加 马 昌 口 : 包 -| 耻 . 2 


5 


ET 


ear mon Dl 
二 寻 作 人 六 件 ， 丁 兴 寺 术 雪 中介 文 人"] 


ET HET SFI YI 


图 14-14 页 面 “editmultiphp” 图 14-15 页面 “editonei.txt” 


步骤 14 新 建 “editsortphp” 页 面 ， 用 它 来 处 理 用 户 在 “editphp” 中 选择 的 页 面 ， 将 
记事 本 “editsorttxt” (光盘:\ 素 材 \ 第 14 章 \editsorttxt ) 中 的 代码 复制 到 页 面 
中 ， 如 图 14-16 所 示 。 


-~ 26、 


小 魔女 , 许多 代码 都 会 让 人 没 
有 头绪 , 这 些 代码 都 有 相应 的 
注释 ， 初 学 者 一 定 要 弄 懂 代 
码 , 然后 弄 懂 页 面 与 页 面 之 间 


的 关系 。 » 
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14.3.3 ”前 台 的 制作 


前 台 是 浏览 者 能 浏览 到 的 页 面 ， 在 这 个 页 面 中 浏览 者 可 以 方便 地 浏览 站 点 中 发 布 的 昭 
片 ， 浏 览 者 浏览 照片 后 ， 可 对 照片 进行 留言 。 


1.， logo 的 制作 


一 个 网 站 或 多 或 少 都 需要 对 图 片 进 行 处 理 , 相册 网 站 也 不 例外 , Logo 是 网 站 中 典型 的 
图 片 ， 本 节 将 利用 Photoshop 强大 的 处 理 功能 来 制作 网 站 Logo， 具 体操 作 如 下 : 
步 又 1 启动 Photoshop CS3， 选 择 【文件 】/【 新 建 】 命 令 ， 将 弹出 “新 建 ” 对 话 框 ， 
在 “宽度 ”和 “高 度 ” 文 本 框 中 分 别 输入 “180” 和 “50”， 选 择 “像素 ” 选 
项 ， 单 击 玉 确证 按钮 ， 如 图 14-17 所 示 。 
步 又 2 右 击 工具 箱 中 的 文字 工具 ， 在 弹出 的 快捷 菜单 中 选择 横 排 文字 工具 于 ， 如 
图 14-18 所 示 。 


0 00 
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图 14-17 “新 建 ” 对 话 框 图 14-18 ”选择 横 排 文 字 工 具 

步骤 3 ”在 编辑 区 输入 “极点 相册 ”文本 ， 在 菜单 栏 的 下 方 将 文字 设置 成 “方正 少儿 
简体 ”、“18 号 ”、“ 蓝 色 ”， 如 图 14-19 所 示 。 

步 又 4 在 右边 的 “图 层 ” 面 板 中 选择 背景 图 层 ， 在 工具 箱 中 选择 油漆 桶 工具 仿 ， 将 
颜色 设置 成 “黑色 ”并 填充 背景 图 层 。 

步 又 5 使 用 相同 的 方法 ， 输 入 文本 “每 个 人 都 是 生活 的 导演 ”， 将 文字 设置 成 “ 宋 
体 ”、“10 号 ”、“ 白 色 ”， 如 图 14-20 所 示 。 


| “魔法 档案 
在 存储 网 页 时 ， 一 定 要 存储 网 页 支持 的 格式 ，JPEG、GIF、PNG 都 是 网 页 中 常用 的 格式 ， 
但 有 一 个 特点 ，GIF、PNG 两 个 格式 可 以 实现 透明 的 效果 。 
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14-19 输入 文字 14-20 设置 文字 


步 又 6 在 “图 层 ” 面板 中 单 击 背 景 图 层 前 面 的 多 标签 ,， 隐藏 该 图 层 ， 如 图 14-21 所 示 。 
步骤 7 选择 【文件 】/【 存 储 】 命 令 ， 将 会 弹出 “存储 为 ”对 话 框 ， 选 择 存储 位 置 ， 

在 “格式 ”下 拉 列 表 中 选择 “.gif” 格式 ， 在 “文件 名 ”文本 框 中 输入 
“logo”， 单 击 CEE@ 按钮 ， 如 图 14-22 所 示 。 


下 便民 


Ta 
Gre] 
图 14-21 隐藏 图 层 14-22 存储 文件 
训 趾 步 又 8 在 弹出 的 “索引 颜色 ”对 话 框 中 单 击 纪 家 按 钮 弹出 “gif 选项 ”对 话 框 ， 
直接 单 击 弓 醋 瑟 按钮 ， 完 成 图 片 的 制作 。 


2. 前 台 的 程序 


网 站 中 的 数据 大 都 保存 在 数据 库 中 ， 用 户 需要 编写 一 系列 程序 将 数据 库 中 的 照片 读 取 
出 来 ， 具 体操 作 如 下 : 


站 ‘ 
2% -学 就 会 高 法 书 下 和 


法 村 
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步骤 1 ”新建 页 面 “indexphp”， 将 “index.txtf” (光盘 :\ 素 材 \ 第 14 章 \idnex.txt ) 代码 
复制 到 页 面 中 ， 如 图 14-23 所 示 。 

步骤 2 在 首页 , 它 最 前 面 调用 了 两 个 网 页 , 一 个 是 globalphp, 一 个 是 smarty.inc.php。 
在 “globalphp” 页 面 中 需 完成 “获取 时 间 ”、“ 获 取 IP 地 址 ”、“ 连 接 数 
据 库 ”、“ 获 取 目 录 ”、“ 字 符 转 意 ”、“ 前 台 分 页 ”、“ 留 言 的 分 页 ”、 
“前 台 公 告 ”等 内 容 ， 新建 网 页 “global.php”， 打 开 记 事 本 global.txt (光盘 :\ 
素材 \ 第 14 章 \ global.txt) ， 将 其 中 的 代码 复制 过 来 ， 如 图 14-24 所 示 。 
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14-23 ”首页 的 代码 图 14-24 关系 页 的 制作 


步骤 3 新 建 页 面 “smarty.inc.php”, 将 记事 本 smarty.inc.txt( 光盘 :\ 素 材 \ 第 14 章 \smarty 
-inc.txt) 中 的 代码 复制 过 来 ， 将 其 保存 ， 如 图 14-25 所 示 。 

步 又 4 新建 页 面 “commentsphp”， 这 个 页 面 用 来 限制 一 些 不 良 浏览 者 的 留言 ， 过 
滤 掉 敏感 的 词汇 ， 还 会 限制 留言 的 长 短 等 一 系列 的 内 容 ， 打 开 记 事 本 
comments.txt (光盘 :\ 素 材 \ 第 14 章 \comments.txt) ， 将 代码 复制 到 页 面 ， 如 
图 14-26 所 示 。 


间 魔法 档案 

global.php 页 面 实际 上 不 只 是 前 台 调 用 的 页 面 ， 在 后 台 的 设置 页 调用 这 个 页 面 ， 通 过 这 个 
页 面 , 用 户 才 可 以 打开 数据 库 , 并 且 此 网 页 有 分 页 等 功能 , 前 台 和 后 台 分 页 都 比较 多 , 所 以 global.php 
实际 上 不 只 是 前 台 的 页 面 ， 后 台 也 需要 。 
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罗 四 了 镍 -所 -| 四 -不 三 = 捧 和 守 用 高 | 表单 | FE 各 所 | Syry | 文本 | 收藏 
刀口 最 | 习 四 加- 条- 前 昂 加 心心 -| 四 . 刁 


ns 可 能 包 柱 非法 内 容 : 


“ javaccript :history, ee- 
1 


加 


onee FHPTOU. ,fsnarty/ Srarty. lass, php 入 
sor Smarty ， ee es 
checkur] [Surl) 


heckcentent (cortent) 


“Javascript:hietory, goCD) 


窑 达 | 夸 叶 车 


conid DF 
sg 该 十 言 已 下 在 ,，，" javascript:histery. eof 中) 


< 局 展位 加 | 各 [| 


met (3) 


14-25 配置 页 面 图 14-26 限制 页 面 


步骤 5 新 建 页 面 “image.class.php”， 这 是 对 图 片 处 理 的 功能 页 面 ， 这 个 图 片 中 ， 它 
要 求 图 片 以 什么 方式 显示 给 浏览 者 , 如 图 片 的 缩放 比例 、 给 图 片 加 一 个 水 印 ， 
将 记事 本 “image.class.txt”( 光盘 :\ 素 材 \ 第 14 章 \image.class.txt ) 复制 到 页 面 
中 ， 如 图 14-27 所 示 。 

步骤 6 ”新建 页 面 “dZip.inc.php”, 从 记事 本 “dZip.inc.txt” (光盘 :\ 素 材 \ 第 14 章 \dZip. 
inc.txt ) 中 才刚 代 丽 到 网 各 让， 并 保存 页 面 ， 如 图 14-28 所 示 。 
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图 14-27 处理 图 片 页 面 图 14-28 页 面 “dzip.inc.php” 
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14.4 初学 者 如 何 使 用 相册 源码 


通过 上 面 的 制作 ， 由 于 种 种 原因 ， 读 者 未 必 能 制作 出 效果 ， 所 以 本 书 作 者 特 为 初学 者 
考虑 ， 编 写 了 一 个 安装 向 导 ， 用 户 可 以 根据 向 导 安 装 好 ， 观 看 其 效果 与 代码 ， 具 体操 作 
如 下 : 

步 又 1 用 户 将 光盘 中 的 “photo” 文 件 夹 复制 到 “D:\PHPnow\htdocs” 目 录 下 ， 启 动 

浏览 器 ， 在 地 址 栏 中 输入 “http://127.0.0.1/photo/installLinc/installphp”， 单 击 
[E35] 按钮 ， 如 图 14-29 所 示 。 
步 又 2 将 会 转 到 另 一 张 网 页 ， 这 时 要 求 


vo RC， 不 有 和 抽 区 人 完全 必 务 基 六 庆生 /下定 
下 


14-29 ”安装 向 导 首 页 14-30 ”需要 数据 库 信息 


步 又 3 ”由 于 未 创建 专门 针对 该 网 站 的 数据 库 , 所 以 启动 PHPMyAadmin 创建 数据 库 ， 
在 地 址 栏 中 输入 “http://127.0.0.1/phpmyadmin/”， 在 打开 的 页 面 中 输入 用 户 
名 和 密码 ， 并 进入 管理 数据 库 首 页 ， 在 “创建 一 个 新 的 数据 库 ”文本 框 中 输 
入 “photos”， 单 击 [9 按钮 ， 如 图 14-31 所 示 。 


Er 


phpMyAdmin -2.11.6 
We SPE 505Ib 


图 14-31 创建 数据 库 
步骤 4 ”在 打开 页 面 中 按 如 图 14-32 所 示 进 行 编辑 ， 并 单 击 [E3] 按 钮 。 
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步 又 5 安装 成 功 ， 将 会 显示 提示 信息 ， 如 图 14-33 所 示 。 
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14-32 输入 信息 图 14-33 ”安装 成 功 
步 又 6 在 地 址 栏 中 输入 首页 的 网 站 地 址 即 可 ， 如 图 14-34 所 示 。 
Er 
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a 
14.5 常见 问题 解答 


外 放量 如何 才 能 息 主 本 出 更 好 的 网 站 程序 


初学 者 在 学 习 写 程序 时 不 要 太 浮 躁 ， 心 态 很 重要 ， 用 户 可 以 去 网 站 中 下 载 一 些 代 码 
来 进行 学 习 和 研究 ， 如 www.phpyou.com 提供 的 PHP 网 站 代码 都 十 分 优秀 。 


@. 

LEh: 

A. 魔法 师 ， 学 完了 本 书 ， 我 感觉 还 未 达到 配置 的 状态 ， 我 该 如 何 去 提 高 动态 网 站 方面 
的 内 容 呢 ? 


: 这 本 书 是 入 门 级 的 书籍 ， 学 完 本 书后 ， 要 求 能 对 网 站 有 一 定 的 理解 ， 能 制作 出 简单 
的 网 站 即 可 ， 要 想 制作 出 企业 级 的 网 站 ,用 户 还 需 读 懂 PHP 函数 手册 ， 那 里 面 有 许 
多 知识 点 ， 对 数据 库 编程 方面 有 重要 的 讲解 ， 用 户 读 懂 这 些 后 ， 要 勤 练 习 写 代码 ， 
积累 经 验 ， 从 而 达到 精通 的 境界 。 


Bs 


人 二 所 ， 匠 用 PHP 制作 了 一 个 网站， 朋友 们 看 了 后 说 这 个 同 站 难以 操作 ， 这 是 在 
一 回 事 ? 


入 ， 这 应 该 是 表现 形式 不 到 位 的 问题 ， 在 网 页 的 设计 过 程 中 ， 一 定 要 把 功能 板块、 交互 
板块 放 在 显眼 的 位 置 ， 表 单 尽量 形象 化 ， 用 户 可 以 通过 动画 和 图 片 让 这 部 分 功能 突 
出 ， 千 万 不 要 把 这 些 功 能 放 在 隐藏 的 地 方 ， 让 浏览 者 去 寻找 ， 这 种 制作 方法 是 初学 
者 最 容易 犯 的 错误 。 


: 魔法 师 ， 听 说 PHP 除了 可 以 制作 网 站 ， 还 能 开发 其 他 的 大 型 系统 ， 是 真 的 吗 ? 


Pa 把 


: 网 络 办 公 成 了 当今 时 代 的 主流 ， 利 用 动态 语言 开发 一 些 大 型 系统 是 很 平常 的 事情 ， 
如 CRM、ERP、 管 家 婆 等 软件 都 是 利用 动态 语言 开发 的 ， PHP 能 适应 大 型 的 商务 功 
能 ， 自 然 对 这 个 也 不 例外 。 但 是 这 样 一 个 庞大 的 系统 对 于 初学 者 来 说 ， 有 很 高 的 难 
度 ， 初 学 者 除了 程序 方面 的 知识 不 够 以 外 ， 还 对 公司 系统 板块 不 了 解 ， 所 以 建议 初 
学 者 不 要 急于 求 成 ， 要 脚踏实地 的 学 习 程序 ， 才 能 制作 出 商业 级 的 程序 。 
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14.6 过 关 练 习 


(1) 网 站 数据 十 分 重要 ， 要 有 即时 备份 的 习惯 ， 启 动 PHPMyAdmin 对 网 站 数据 库 进 
行 备 份 ， 如 图 14-35 所 示 。 

提示 : 选择 需要 的 数据 库 , 选择 “导出 ”选项 卡 , 然后 选中 a #3 双重 复 选 框 , 再 单 击 [和] 
按钮 ， 将 弹出 “另存 为 ”对 话 框 ， 将 备份 文件 保存 到 需要 的 位 置 即 可 。 


FT 


= 


14-35 备份 网 站 数据 库 


(2) 进入 管理 后 台 ， 新 建 一 个 相册 ， 上 传 10 张 照片 到 网 站 中 ， 上 传 完毕 后 ， 在 首页 
浏览 其 内 容 。 


“一 学 就 会 魔法 书 ” 意 见 反 馈 表 


尊 歼 的 读者 朋友 : 


感谢 您 在 “茫茫 书 海 ”中 发 现 了 这 枚 闪光 的 “ 贝 赤 ”! 如 果 它 能 
够 为 您 的 工作 、 生 活 带 来 光彩 和 乐趣 ， 我 们 将 感到 无 比 高 兴 。 为 了 让 
本 书 能 更 好 地 服务 于 后 来 的 读者 ， 和 希望 在 百 忙中 写 下 您 的 感受 和 建议 
邮寄 给 我 们 ， 我 们 会 逐步 改进 ， 并 赠 小 礼品 以 示 感 谢 。 


1， 您 在 哪里 第 一 次 看 


到 这 本 书 的 ? 


口 书店 演示 ” 口 图 书馆 口 别人 推荐 口 网 上 口 广告 宣传 
2， 您 决定 买 本 书 的 因素 有 哪些 ? 

口 多 媒体 演示 光盘 口内 容 翔 实 、 详 细 

口 图 解 风格 学 起 来 很 快 口 装帧 (封面 、 版 式 ) 不 错 
3， 您 认为 本 书 多 媒体 光盘 怎样 ? 

界面 : 口 活 涛 可爱， 我 喜欢 口 太 幼稚 ， 太 小 儿科 

口 没有 必要 设置 人 物 

配音 : 口 比较 标准 口音 色 不 错 。” 口 比较 差 

人 物 : 口 幼稚 口 可 爱 

场景 : 口 清新 亮丽 。“ 口 不 美观 

您 认为 光盘 还 应 该 怎样 改进 ? 


4.， 您 认为 本 书 内 容 怎 
图 解 化 的 风格 : 


样 ? 
很 好 ， 学 习 起 来 比较 快 
不 好 ， 就 几 个 图 片 ， 内 容 太 少 


步骤 : 口 错误 太 多 ， 根 本 调试 不 通 口 比较 准确 

例子 : 口 大 小 适中 ， 学 起 来 比较 快 口 不 太 好 

语言 : 口 风格 活泼 ， 我 喜欢 口 不 严谨 ， 废 话 太 多 
人 物 : 口 有 人 物 好 ， 活 小 口 幼稚 ， 没 必要 


un 


SN 


一 1 


， 您 认为 本 书 最 令 人 


您 认为 本 书 内 容 应 该 怎样 改进 ? 


， 您 认为 本 书 的 装帧 怎样 ? 


封面 : 口 颜色 太 暗 ， 我 不 喜欢 。 口 太 俗气 ,没有 情调 

比较 清爽 ， 整 体 尚 可 清新 亮丽 ， 我 喜欢 
比较 喜欢 的 封面 风格 是 : 

中 漫画 类 型 的 口 国画 类 艺术 类 型 口 其 他 

您 最 喜欢 的 封面 颜色 是 : 

怎样 的 封面 (文字 、 图 案 、 颜 色 ) 才 是 您 最 喜欢 的 封面 ? 


双色 印刷 : 口 


号 


影响 阅 ee 没有 必要 口 耳目 一 新 ， 插 好 的 
满意 、 最 让 您 不 满意 的 地 方 是 : 


. 现 阶段 您 最 需要 什么 样 的 电脑 书 ? 


您 购买 的 书 名 《 》 
您 的 信息 : 

姓名 : 性 别 : 口 男 口 女 “年 龄 : 职业 : 

邮编 : 通讯 地 址 : 

电话 : E-mail: 

我 们 的 通信 地 址 : 


北京 清华 大 学 校内 出 版 社 白 楼 ( 邮编: 100084 ) 
“一 学 就 会 魔法 书 ” 从 书 编辑 部 ( 收 ) 


